vue视频上传组件,vue 图片上传组件
虽然大部分前端UI框架都提供了文件上传组件和很多插件可供选择，但是我们在工作中可能没有必要去写一个上传组件，但是零包装组件的学习还是很有帮助的。下面介绍一个用Vue3 TypeScript实现的文件上传功能。目前只实现了上传等基本功能，以后会逐步扩展功能。
:
目录
1.导言2。实现idea文件上传的两种方式3。生命周期4。守则草案5。具体实施
1.介绍
效果如下
2.思路
文件上传的两种实现方式
1.从表单
形式
method=post
enctype=multipart/from-data
操作= API/上传
输入类型=文件名=文件
按钮类型=提交提交/按钮
/表单
form的method属性被指定为“post”请求，它通过HTML表单向服务器发送数据，并返回服务器的修改结果。在这种情况下，Content-Type是通过在form元素中设置正确的enctype属性来实现的。
form的enctype属性指定表单数据在发送到服务器之前应该如何编码。
application/X-www-form-urlencoded(默认值):表示发送前对所有字符进行编码，将数据编码成由 分隔的键-值对，而键和值由=，( name=sevenage=19 )。不支持二进制数据。
多部分/格式数据：支持二进制数据(上传文件时必须指定)
2.JavaScript异步请求表单
我们知道，FormData接口提供了一种构造表示表单数据的键/值对的方法，它可以通过XMLHttpRequest.send()方法轻松发送数据。这个接口和这个方法非常简单和直接。如果提交时的编码类型设置为“多部分/表单数据”，它将使用与表单相同的格式。
var FormData=new FormData()；//创建一个FormData对象
formdata.append(name ，老铁)；//通过append()方法添加新的属性值
.//更多方法请点击下面的链接。
表单数据接口
3.生命周期
上传组件也有生命周期。
上传前-上传-文件已上传或上传错误
4.代码草稿
在这个例子中，js异步请求用于开发上传组件。
input type= file name= file @ change . prevent= handle file change
//创建一个文件类型的输入，用于触发文件上传。以后可以隐藏输入，自定义漂亮的样式。
//slot可以用来在自定义样式时区分不同上传状态下的样式(加载、成功、默认)。
const handle file change=(e:Event)={
const target=e . target as HTMLInputElement
const files=array . from(target . files)//注意，这里得到的是类的数组。
如果(文件){
//获取文件
const uploadedFile=files[0]
如果(！validateFormat)返回
//.这里只是一个思路，具体验证就不描述了。
//在这里上传文件之前做一些检查，比如文件格式，大小等。
//如果不符合要求，就不要继续发送请求。
const formData=新表单数据()
formdata . append(uploadedFile . name，uploaded file)
axios.post(/upload ，formData，{
标题：{
//注意设置编码类型。
“内容类型”:“多部分/形式数据”
}
}).然后(res={
Console.log(“上传成功”)
}).catch(错误={
//文件上传失败
}).最后(()={
//文件上传完成，无论成功还是失败
//您可以在这里清除输入值
})
}
}
5.具体实现
//Upload.vue
模板
div class=上传-容器
div class= upload-box @ click . prevent= trigger upload v-bind= $ attrs
slot name= loading v-if= file status=== loading
按钮class=btn btn-primary 上传/按钮
/插槽
slot name= uploaded v-else-if= file status=== success :uploaded data= file data
Button class=btn btn-primary 上传成功/button
/插槽
slot v-else name=default
按钮class=btn btn-primary 点击上传/按钮
/插槽
/div
input type= file class= file-input d-none name= file ref= upload input @ change= hanldeInput /
/div
/模板
脚本语言
从“vue”导入{定义组件，引用，属性类型，观察}
从" axios "导入爱可信
键入UploadStatus=ready 正在加载 成功 错误
type function props=(File:File)=1布尔值
导出默认定义组件({
名称："上传",
继承者：假的，
道具：{
//上传的全球资源定位器(统一资源定位器)
动作：{
类型：字符串，
必填：真
},
//上传之前的校验，是一个返回布尔值的函数
上传前：{
类型：函数为PropTypeFunctionProps
},
//上传好的数据，用来判断状态或做初始化展示
上传的数据：{
类型：对象
}
},
发出：[文件上传-成功,文件上传-错误],
设置（道具、ctx) {
const upload input=ref null HTMLInputElement(null)
const文件状态=refUploadStatus(props。上传的数据？成功:就绪)
const文件数据=ref(props。上传的数据)
watch(()=props.uploadedData，(val)={
if (val) {
fileStatus.value=success
fileData.value=val
}
})
const triggerUpload=()={
if (uploadInput.value) {
uploadInput.value.click()
}
}
const hanldeInput=(e:Event)={
const target=e . target as HTMLInputElement
常量文件=目标文件
console.log(目标)
如果（文件){
const uploadFile=Array.from(文件)
const验证格式=props。上传前？道具。上传前(上传文件[0]):真
如果(!有效格式)返回
fileStatus.value=loading
常量表单数据=新表单数据()
formData.append(file ，uploadFile[0])
axios.post(props.action，formData，{
标题：{
"内容类型":"多部分/形式数据"
}
}).然后(res={
console.log(文件上传成功，res)
fileStatus.value=success
fileData.value=res.data
ctx.emit(文件-上传-成功研究数据)
}).接住(错误={
console.log(文件上传失败，错误)
fileStatus.value=error
ctx.emit(文件-上传-错误，错误)
}).最后(()={
console.log(文件上传完成)
if (uploadInput.value) {
uploadInput.value.value=
}
})
}
}
返回{
上传输入，
触发器上传，
hanldeInput，
文件状态，
文件数据
}
}
})
/脚本
使用示例：
模板
div class=创建-发布-页面
上传
action=/upload
:beforeUpload=beforeUpload
:uploadedData=uploadedData
@ file-uploaded-success= hanldeUploadSuccess
d-flex对齐-项目-居中对齐-内容-背景居中-浅色文本-次要w-100 my-4
模板#uploaded=slotProps
div class=上传区域
img:src= slot props。上传的数据。数据。URL /
h3点击重新上传/h3
/div
/模板
模板#默认
氘点击上传头图/h2
/模板
模板#加载
div class=d-flex
div class= spinner-border text-secondary role= status
span class=仅限Sr /span
/div
/div
/模板
/上传
/div
/模板
脚本语言
从“vue”导入{定义组件，引用，已安装}
导入上传自./components/Upload.vue
导入创建邮件自./components/createMessage
导出默认定义组件({
名称：创建帖子，
组件：{上传},
setup() {
const uploadedData=ref() //创建一个响应式数据
让imageId=
onMounted(()={
.
//这里有逻辑省略了，取到初始化数据图像
如果（图像){
上传的数据。value={ data:image }
}
})
//上传前校验，返回布尔值
上传前的常数=(文件：文件)={
const RES=beforeUploadCheck(file，{
格式：[图像/jpeg ，图像/png]，
尺寸：1
})
常数{错误，通过}=res
if (error===format) {
createMessage(上传图片只能是JPG/巴布亚新几内亚格式!,错误)
}
if (error===size) {
createMessage(上传图片大小不能超过1MB ，错误)
}
退货通过
}
//上传成功后拿到图片的编号就可以进行后续处理，创建表单啥的
const hanldeUploadSuccess=(RES:responsepropsimageprops)={
创建消息(` m上传图片ID ${res.data._id} `，成功)
if (res.data._id) {
imageId=res.data._id
}
}
返回{
上传前，
hanldeUploadSuccess，
上传的数据
}
}
})
/脚本
风格。创建-发布-页面{
填充：0 20px 20px
}。创建-发布-页面。上传框{
高度：200像素
光标：指针；
溢出：隐藏；
}。创建-发布-页面。上传框img{
宽度：100%;
身高：100%;
对象适合：封面；
}。上传区域{
位置：相对；
}。上传区域：悬停h3{
显示：块；
}。上传-区域h3{
显示：无；
位置：绝对；
颜色：# 999;
文本对齐：居中；
宽度：100%;
最高：50%
}
/风格
以上就是某视频剪辑软件实现上传组件的详细内容，更多关于某视频剪辑软件上传组件的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。