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

2021年09月15日 阅读数:1
这篇文章主要向大家介绍文件、图片、视频上传怎么传,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

文件上传怎么传

 

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

初次尝试的我屡屡遇坑,下面给你们分享个人心历路程(yun tou zhuan xiang)ios

 

传输的内容:element-ui

首先咱们要肯定传输的内容,若是传输的内容不对的话,咱们写的再对也没有用json

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

当显示出(binary)就表明咱们传输的内容是正确的了,不然不要谈别的了。后端

 

 

如何正确获取传输内容:api

那么如今咱们明确给接口传递的数据的形式了,咱们怎么获取到正确的传输内容呢?数组

vue有经常使用的组件库app

由于我平时作的都是pc端的东西因此用的是element-ui,element-ui为咱们提供了一个很好用的上传组件,ide

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

就是这个可爱的小组件

 

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

         <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

 

 

 

编码64:

onUploadChange(file,fileList) {
      // let me = this;
      // let reader = new FileReader();
      // reader.readAsDataURL(file.raw);
      // reader.onload = function (e) {
      //   // console.log(this.result)//图片的base64数据
      //   me.base64.push(this.result)
      // }
}

 

 

 

 

以上。

若有疑问欢迎沟通。