Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

文件、图片、视频上传怎么传

薛小白 2019-02-24 16:10:00 阅读数:248 评论数:0 点赞数:0 收藏数:0

文件上传怎么传

 

前言:周五的时候有了一个新的需求,要求上传图片和视频,

初次尝试的我屡屡遇坑,下面给大家分享我的心历路程(yun tou zhuan xiang)

 

传输的内容:

首先我们要确定传输的内容,如果传输的内容不对的话,我们写的再对也没有用

那么传输什么样的数据应该是什么样的呢?

当显示出(binary)就代表我们传输的内容是正确的了,否则不要谈别的了。

 

 

如何正确获取传输内容:

那么现在我们明确给接口传递的数据的形式了,我们怎么获取到正确的传输内容呢?

vue有常用的组件库

因为我平时做的都是pc端的东西所以用的是element-ui,element-ui为我们提供了一个很好用的上传组件,

但是需要认真看他的文档,看不懂文档是写不出来的(不蛮各位,我一开始没看懂)

就是这个可爱的小组件

 

 多种形式任你挑任你选总有一款适合你

 <el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-change="onUploadChange"
 :on-remove="handleRemove"
:file-list="fileList2"
list-type="picture">
<el-button size="small" type="primary">上传</el-button>
</el-upload>

我用的这一个,重点来了,我这里显示了图片,让我图片显示的

//就是这个
:file-list="fileList2"
list-type="picture"

更重点的来了,我们要扯回一开始的主题,怎么获取要传输的内容,

这个组件为我们提供了许许多多的钩子和方法,

比如:

:on-change="onUploadChange"
//当你上传图片时,由于发生了改变,因此会触发这个函数
//这个函数有两个参数,这两个参数分别是file和fileList
//file就是你最近更新的图片信息
//fileList是你上传所有图片的数组信息

我们打印出来看一看

这是file打印出来的内容

这是fileLIst打印出来的内容

而我们需要的内容就是file.raw

 

 

接口传值:

接口传值,此处我们定的是formData的格式。

但是上传不能像平常那样body传值,

我们需要formData : new FormData(),

 onUploadChange(file,fileList) {
this.formData.append("images", file.raw);
},

当我们点击提交的时候,此处使用axios请求接口

await axios.post('/rfid/api/v1/goods', this.formData).then((res) => { console.log(res)}) 

 

 

不用组件用input可以么:

如果重多组件没有我们的菜,自己用input写一个也无妨

<input class="video_file" type="file" @change="tirggerFile($event)"/>

同理,使用@change获取到我们要传递的内容

 tirggerFile(event){
this.formData.append('video',event.target.files[0])
console.log(event.target.files[0])
}

 就是我们要获取的内容 event.target.files[0]

 

 

传递多个图片:

当我们需要传递多个图片的时候,可以在组件加一个属性,

multiple
即为
<el-upload
class="inline-upload"
action=""
multiple
:on-change="onUploadChange"
:on-remove="handleRemove"
:auto-upload="false"
list-type="picture"
:file-list="fileList2">
<el-button size="small" slot="trigger" round icon="el-icon-plus">上传</el-button>
</el-upload>

此处有一个坑,我一开始总以为,图片要一个一个传,

然后最后都传给后端接口,这样就可以显示多张图片,

但是一张一张传你会发现后一张总会把前一张给覆盖掉,

因此其实此处的多张上传是同时上传好几张图片,上传的时候按住shift即可上传多张,

此处仍然是将file.raw传给后端即可。

 

 

上传视频:

上传视频和上传图片原理是一样的,可共用上述内容,

如果你像要做一些限制,可以通过accept来限制你上传的文件类型以此区别图片和视频

accept 接受上传的文件类型(thumbnail-mode 模式下此参数无效) string

 

 

 

 

以上。

如有疑问欢迎沟通。

 

版权声明
本文为[薛小白]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/yangyangxxb/p/10423480.html

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;

支付宝红包,每日可领