vue上传图片组件,vue 上传组件
这篇文章主要介绍了某视频剪辑软件封装上传图片和视频的组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
首先下载依赖：
cnpm i -S vue-uuid ali-oss
图片和视频字段都是数组类型，保证可以上传多个文件。
上传图像视频：
！-上传图像视频分片上传-
模板
div class=UploadImageVideo
埃尔-上传
行为
:on-change=handleChange
:on-remove=handleRemove
:limit=limitFileNumber
:on-exceed=handleExceed
:file-list=_fileList
:http-request= handle http request
:before-upload= handleBeforeUpload
:multiple=isMultiple
埃尔按钮槽=触发器大小=小类型=主要选择文件/el-button
div slot= tip class= El-upload _ _ tip“{ tip } }/div
/El-上传
埃尔对话
title=上传进度
:可见。sync= dialogtable visible
:close-on-click-modal=false
:modal-append-to-body=false
el-progress :text-inside=true :笔画宽度= 26 :percentage= percentage /El进度
/el-dialog
/div
/模板
脚本
从" vue-uuid "导入{ uuid }；
const OSS=require( Ali-OSS )；
导出默认值{
名称： ,
组件：{},
道具：{
地区：{
类型：字符串，
默认：“OSS-cn-成都"
},
accessKeyId: {
类型：字符串，
默认值：“xxx”
},
accessKeySecret: {
类型：字符串，
默认值：“xxx”
},
//存储位置
存储桶：{
类型：字符串，
必填：真
},
当前值：{
类型：数组，
默认值：()=[],
必填：真
},
//限制上传文件数量
limitFileNumber: {
类型：数量，
默认值：1
},
//是否支持多选
isMultiple: {
类型：布尔型，
默认值：错误
},
//文件格式
文件类型：{
类型：字符串，
默认值：""
},
//提示
提示：{
类型：字符串
}
},
data() {
返回{
客户端：新操作系统({
区域：这个区域，
accessKeyId: this.accessKeyId，
accesskey secret:这个。访问密钥机密，
水桶：这个。水桶
}),
百分比：0,
dialogTableVisible: false，
文件列表：[]
};
},
计算值：{
//注意：计算属性里面慎用console.log()来打印，因为有可能打印的变量是依赖某个属性而出现该计算属性重复调用！
_fileList() {
const arr=[]；
//一定要这个。当前值判断一下是否非空，否则要报错
if (this.currentUrls.length！==0) {
对于(这个。当前URL的常量项){
让{路径名}=新网址(项目);
arr.push({名称：decodeURIComponent(路径名)，网址：item })；
}
}
this.fileList=arr//这行代码很重要！
返回arrive）
}
},
已创建(){},
已安装(){},
方法：{
手柄变化(文件，文件列表){
这个。文件列表=文件列表；
},
手柄移除(文件，文件列表){
这个。文件列表=文件列表；
},
handleExceed(文件，文件列表){
这个message.warning(
`当前限制选择${this.limitFileNumber}个文件，本次选择了${
文件。长度
} 个文件，共选择了${files.length文件列表。长度}个文件`
);
},
//注意：为了让自定义上传handleHttpRequest生效，需满足：
//1、设置：自动上传=真或者不写这个属性，因为它默认为真2、设置action=# 或者直接写行为
handleHttpRequest(文件){
//虽然没有内容，但是这个函数不能少！
},
//注意：自定义上传handleHttpRequest必须要生效，才会触发上传前钩子函数
handleBeforeUpload(文件){
if (this.fileType==image) {
设{类型，大小，名称}=文件
设是JPEG=type=== image/JPEG ；
设is jpg=type=== image/jpg ；
设isPNG=type=== image/png ；
设islt 5m=size/1024/1024 5；
如果(!isJPEG！isJPG！isPNG) {
这个message.error(上传图片只能是JPEG/JPG/巴布亚新几内亚格式!);
返回错误的
}
如果(!isLt5M) {
这个message.error(单张图片大小不能超过5MB！");
返回错误的
}
}
if (this.fileType==video) {
设{类型，大小，名称}=文件
设ismp 4=type=== video/MP4 ；
设islt 50m=size/1024/1024 50；
如果(!isMP4) {
这个message.error(上传视频只能是MP4格式!);
返回错误的
}
如果(!isLt50M) {
这个message.error(单个视频大小不能超过50MB！);
返回错误的
}
}
},
//分片上传数据，可展示进度条。上传重命名后的文件到阿利奥斯，并返回单个文件全球资源定位器(统一资源定位器)字符串。可支持中文文件名
异步上传图像视频（文件名，文件){
让新文件名=
filename.split( . )))[0]-- uuid . v1() .filename.split( . )))[1];
让那个=这个；
that.dialogTableVisible=true
让{
res: { requestUrls }
}=等这个。客户。多部分上传(新文件名，文件，{
进度：函数(p，检查点){
那个。percentage=parse float((p * 100)).到固定(2))；
}
});
如果(百分比==100)
that.dialogTableVisible=false
}
让{原点，路径名}=新URL(请求URL[0])；
返回原点decodeURIComponent(路径名);
},
//批量上传文件。返回成功上传的全球资源定位器(统一资源定位器)数组
异步添加文件(){
让URL=[]；
if (this.fileList.length！==0) {
对于(这个。文件列表的常量项){
让{ name，raw }=项目
让路径名=等待此消息UploadImageVideo(名称，raw)；
urls.push(路径名);
}
}
返回资源定位符
},
//更新文件数据。上传新数据到服务器，并删除服务器中的旧数据，返回更新后的全球资源定位器(统一资源定位器)数组
异步更新文件(){
let arr _ new uploaded=[]；//新上传的图片网址。
设arr _ original=[]；//原有的图片网址。不用删除
设arr _ delete=[]；//需要删除的图片网址。
if (this.fileList.length！==0) {
对于(这个。文件列表的const { raw，name，URL){
//注意：这里一定要判断生的是否存在。存在，则表示是新上传的；不存在，则表示是原有的
如果（原始){
让路径名=等待此消息UploadImageVideo(名称，raw)；
arr_newUploaded.push(路径名);
}
如果(这个。当前URL。包括(URL)){
arr _原创. push(网址);
}
}
}
对于(这个。当前URL的常数元素){
如果(!arr _原创。包括(元素)){
arr _ delete推(元素)；
}
}
等等这个。删除多堆(arr _ delete)；
返回[.arr原创，arr _新上传]；
},
//批量删除服务器中的文件。参数：待删除到服务器文件全球资源定位器(统一资源定位器)数组。
异步删除多文件(URL=[]){
设arr _ pathname=[]；
if (urls.length！==0) {
对于(URL的常量项){
//不要用let URL=require( URL )；网址。parse()；已失效。要用新URL()
让{路径名}=新网址(项目);
//decodeURIComponent()函数将中文乱码转为中文
arr路径名。push(解码uri组件(路径名))；
}
//删除服务器中的图片
等等这个。客户。删除多个(arr _ pathname)；
}
}
},
观察：{}
};
/脚本
样式lang=scss 范围。上传图像视频{
/*去除上传组件过渡效果*/
*深v型100 . El-上传-列表_ _项{
过渡：无！重要；
}
}
/风格
使用：
上传图像视频
ref=ref_UploadImageVideo
bucket=xxx
:currentUrls=formData.imgurl
:limitFileNumber=3
tip=1，最多上传3张照片；2、上传图片只能是JPEG/JPG/巴布亚新几内亚格式；3、单张图片大小不能超过5MB！"
fileType=image
:isMultiple=true
/UploadImageVideo
文件类型可选。默认不写，表示图片、视频都可上传fileType=image 表示只能上传图片文件类型=视频表示只能上传视频
水桶必选。
是倍数可选。默认为错误的
当前值必选。当前目前已有的文件服务器全球资源定位器(统一资源定位器)数组。通常新增文件时，传入的当前值为空数组[];更新文件时，传入到当前值为非空数组
小费可选。提示内容
提供的方法：(当前组件中所有的上传都是批量上传，且为分片上传，以展示上传进度条)
更新文件().更新文件数据。上传新数据到服务器，并删除服务器中的旧数据，返回更新后的全球资源定位器(统一资源定位器)数组
addFiles()。批量上传文件。返回成功上传的全球资源定位器(统一资源定位器)数组
删除多个文件(URL=[])。批量删除服务器中的文件。参数：待删除到服务器文件全球资源定位器(统一资源定位器)数组。
上传图像视频（文件名，文件).分片上传数据，可展示进度条。上传重命名后的文件到阿利奥斯，并返回单个文件全球资源定位器(统一资源定位器)字符串。可支持中文文件名
调用组件中的方法：例如可通过leturls=awaitthis.$refs["ref_UploadImageVideo"].addFiles();调用批量上传图片或视频的方法
例1:
！-用户管理-
模板
div class=用户管理
电子贺卡
div style=margin-bottom: 10px
埃尔输入
v-model=searchName
可清除的
占位符=输入用户名称搜索
style= width:200 px；右边距：10px
/
埃尔按钮
子思=迷你
类型=成功
icon=el-icon-search
@click=searchUser(searchName)
搜索/el-button
埃尔按钮
子思=迷你
类型=警告
icon=el-icon-refresh-left
@click=searchName=
重置/el-button
el按钮子思= mini @ click= handle add() type= primary icon= El-icon-plus 新增/el-button
el-button @click=getUserList()子思=迷你icon= El-icon-refresh style= float:right 刷新/el-button
/div
El-table:data= table data border v-loading= is loading
埃尔-表格-列标签=用户名prop= username align= center width= 150 px /El-表格-列
埃尔-表格-列标签=密码prop=密码align=中心/El-表格-列
埃尔-表格-列标签=图片align=居中
模板槽-范围="范围"
差异
style=
显示器：flex
justify-content:space-around；
灵活流动：行换行；
埃尔图像
style= width:50px；高度：50px
scope.row.imgurl中的v-for=(项目，索引
:key=index
:src=item
:preview-src-list= scope。划。伊姆古尔
/el图像
！-a:href= scope。划。imgurl rel= external no follow target= _ blank " { scope。划。imgurl } }/a-
/div
/模板
/El-表格-列
埃尔-表格-列标签=操作align=居中
模板槽-范围="范围"
El-button size= mini @ click= showEditDialog(范围。行)
i class=el-icon-edit /编辑
/el-button
El-button size= mini type= danger @ click= handle delete(范围。行)
i class=el-icon-delete /删除
/el-button
/模板
/El-表格-列
/el-table
/电子名片
UserManageDialog:dialog= dialog :formData= formData @ addUser= addUser @ editUser= editUser /UserManageDialog
/div
/模板
脚本
从""导入用户管理对话框./usermanagedialog。vue ；
从" @/utils/alioss.js "导入{ client_alioss，删除多个文件}；
导入{
addUser，
getUserList，
编辑用户，
删除用户，
搜索用户
}来自”@/API/用户管理器/索引”；
导出默认值{
名称：用户管理，
组件：{用户管理对话框}，
data() {
返回{
搜索名称： ,
isLoading: false，
对话框：{
秀：假的，
标题：""
},
表单数据：{},
表格数据：[
{
_id: ，
用户名："管理员",
密码："123",
imgurl: []
}
],
当前消息：[]
};
},
道具：{},
已创建(){},
已安装(){
这个。获取用户列表()；
},
已计算：{},
方法：{
//获取用户列表
异步getUserList() {
this.isLoading=true
let { data }=await get userlist()；
这个。表数据=数据。数据；
this.isLoading=false
},
//打开新增用户窗口
handleAdd() {
this.dialog={
秀：真的，
标题： 新增用户，
选项："添加"
};
this.formData={
用户名： ,
密码： ,
imgurl: []
};
},
//打开编辑用户窗口
showEditDialog(row) {
这个。当前imgs=row。imgurl
this.dialog={
秀：真的，
标题： 编辑用户，
选项："编辑"
};
this.formData={
_id:第7行._id，
用户名：row .用户名
密码：row.password，
imgurl: row.imgurl
};
},
//新增用户
异步addUser(URL){
这个。表单数据。imgurl=URLs
等待addUser(这。formdata)；
这个。对话。show=false
这个. notify({
标题： 成功，
消息： 新增用户成功!,
类型："成功"
});
这个。获取用户列表()；
},
//编辑用户
异步编辑用户(网址
这个。表单数据。imgurl=URLs
等待editUser(this.formData，this。表单数据。_ id)；//更新数据库，尤其是图片全球资源定位器(统一资源定位器)
这个。对话。show=false
这个. notify({
标题： 成功，
消息： 编辑用户成功!,
类型："成功"
});
这个。获取用户列表()；
},
//删除用户
handleDelete({ _id }) {
这个. $确认(此操作将永久删除该文件，是否继续？, 提示, {
confirmButtonText:确定，
取消按钮文本： 取消，
类型："警告"
})。然后(async ()={
这个消息({
类型："成功",
消息： 删除成功!,
showClose: true
});
让{
数据：{ imgurl }
}=await deleteUser(_ id)；
//删除服务器中的文件。传入待删除的全球资源定位器(统一资源定位器)数组
等待删除多文件(imgurl)；
这个。获取用户列表()；
})。catch(()={
这个消息({
类型："信息",
消息： 已取消删除，
showClose: true
});
});
},
//根据用户名查询
异步搜索用户（搜索名称){
this.isLoading=true
let { data }=等待搜索用户({
搜索名称
});
这个。表数据=数据。数据；
this.isLoading=false
}
},
观察：{}
};
/脚本
样式lang=scss 范围。用户管理{
}
/风格
！-用户管理对话框-
模板
div class=userManageDialog
El-dialog:title= dialog。title width= 45% :可见。sync=对话框。显示“v-if=”对话框。显示
El-form ref= ref _ form _ user manage :model= formData :rules= rules label-width= 100px
El-表单-项目标签=用户名prop=用户名
El-input v-model= formdata。用户名 autocomplete= off style= width:90% /El-input
/El-表单-项目
El-表单-项目标签=密码prop=密码
El-input v-model= formdata。密码 autocomplete= off style= width:90% /El-input
/El-表单-项目
El-表单-项目标签=图片prop=imgurl
！-文件类型属性不写的话，表示图片、视频都可上传fileType=image 表示只能上传图片文件类型=视频表示只能上传视频-
上传图像视频
ref=ref_UploadImageVideo
bucket= bucket-丽江-测试
:currentUrls=formData.imgurl
:limitFileNumber=3
tip=1，最多上传3张照片；2、上传图片只能是JPEG/JPG/巴布亚新几内亚格式；3、单张图片大小不能超过5MB！"
fileType=image
:isMultiple=true
/UploadImageVideo
/El-表单-项目
/el格式
div slot=footer class=对话框-页脚
El-button @ click=对话框。 show=false 取消/el-button
埃尔按钮
v-if=dialog.option==add
@ click= addUser( ref _ form _ user manage )
type=primary
确定/el-button
埃尔按钮
v-if=dialog.option==edit
@ click= editUser( ref _ form _ user manage )
type=primary
确定/el-button
/div
/el-dialog
/div
/模板
脚本
从" @/组件/上传图像视频"导入UploadImageVideo
导出默认值{
名称：用户管理对话框，
组件：{上传图像视频}，
道具：[对话框,表单数据],
data() {
返回{
文件列表：[],
规则：{
用户名：[
{必需：真，消息： 请输入用户名称，触发器：模糊 }
]
}
};
},
已创建(){},
已安装(){},
已计算：{},
方法：{
addUser(formName) {
这个参考文献[表单名]。验证（异步有效={
如果（有效){
让urls=等待这个refs[ref_UploadImageVideo].添加文件()；
这个发出( addUser ，URL
}否则{
console.log(错误提交！);
返回错误的
}
});
},
editUser(formName) {
这个参考文献[表单名]。验证（异步有效={
如果（有效){
让urls=等待这个refs[ref_UploadImageVideo].更新文件()；
这个发出( editUser ，URL
}否则{
console.log(错误提交！);
返回错误的
}
});
}
},
观察：{}
};
/脚本
样式lang=scss 范围
/风格
从" vue-uuid "导入{ uuid }；
const OSS=require( Ali-OSS )；
让客户端=新操作系统({
地区：“OSS-cn-成都",
access keyid: ltai 5 tqphviv 8 aakp 1 VG 8 Jr ，
access key secret: xyytotope 8 ufqmdt 4 hptus 4 pnxzl 9s ，
水桶：水桶-丽江-测试，
});
export const client _ a lioss=client；
//删除文件数组
导出异步函数删除多堆(URL=[]){
设arr _ pathname=[]；
if (urls.length！==0) {
对于(URL的常量项){
//不要用let URL=require( URL )；网址。parse()；已失效。要用新URL()
让{路径名}=新网址(项目);
//decodeURIComponent()函数将中文乱码转为中文
arr路径名。push(解码uri组件(路径名))；
}
等待客户。删除多个(arr _ pathname)；
}
}
从" @/实用工具/请求"导入请求
//获取用户列表
导出函数getUserList() {
退货请求({
URL:“/API/用户管理器”，
方法："获取"
})
}
//新增用户
导出函数addUser(数据){
退货请求({
URL:“/API/用户管理器”，
方法： post ，
数据
})
}
//编辑用户
导出函数editUser(data，_id) {
退货请求({
url: `/api/userManage/${_id} `，
方法：“放”，
数据
})
}
//删除用户
导出函数删除用户(_id) {
退货请求({
url: `/api/userManage/${_id} `，
方法："删除"
})
}
//根据关键字查询
导出函数searchUser(data) {
退货请求({
url: `/api/userManage/search `，
方法：“得到”，
参数：数据
})
}
const router=require( KOA-router )()
const User=require(./models/User )；//引入模块模型
router.prefix(/userManage )
//获取用户列表
router.get(/)，async (ctx，next)={
let data=await User.find({})
ctx.body={
代码：200,
消息： 请求成功，
数据，
}
})
//新增用户
router.post(/，async (ctx，next)={
让{用户名，密码，imgurl }=CTX。请求。身体；
等待User.create({用户名，密码，imgurl })
ctx.body={ code: 200，message:新增成功 }
})
//编辑用户
router.put(/:_id ，async (ctx，next)={
让{用户名，密码，imgurl }=CTX。请求。身体；
let { _id }=ctx.params
等待用户。findbyidandupdate(_ id，{用户名，密码，imgurl })
ctx.body={ code: 200，message:编辑成功 }
})
//删除用户
router.delete(/:_id ，async (ctx，next)={
let { _ id }=ctx.params
让{ imgurl }=等待用户。findbyidanddelete(_ id)
ctx.body={ code: 200，message:删除成功，imgurl }
})
//根据关键字查询用户。模糊查询
router.get(/search ，async (ctx，next)={
让{搜索姓名}=CTX。请求。查询；
let data=await User.find({用户名：{ $regex: searchName } })
ctx.body={ code: 200，message:查询成功，数据}
})
模块。导出=路由器
到此这篇关于某视频剪辑软件封装上传图片和视频的组件的文章就介绍到这了，更多相关某视频剪辑软件组件封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。