vue移动端实现文件上传、下载、删除

vue项目使用的插件vant，一个开发移动端很好用的组件

这个组件中自带了上传文件的方法，我们直接调用即可。

<!-- 文件上传 -->
<van-form @submit="onSubmit" enctype="multipart/form-data">
  <van-uploader
    style="float: left;margin-left: 14px;margin-top: 15px;"
    v-model="fileList"
    accept="file"
   >
    <van-button size="small" icon="plus" type="primary">上传文件</van-button>
  </van-uploader>
</van-form>

• fileList 是文件上传的列表，我们上传的文件会暂时存放在这里面。
• accept 允许上传的文件类型，详细说明，
• onSubmit 提交的方法

文件上传方法

async onSubmit () {
  //创建一个formData对象，将要传的文件添加到里面
  let formData = new window.FormData();
  if(this.fileList.length > 0) {
  	//展示遮罩层
    this.show = true;
    for(let i = 0; i < this.fileList.length; i++) {
      //将文件添加到fromData中
      formData.append("file", this.fileList[i].file);
      //将文件传给后台的接口，设置请求头的类型为"multipart/form-data",不然后台可能获取不到。
      await this.$http.post('/aeo_smart/ICommonApi.do?saveFiles&orderno=' + this.id + '&type=chapApply', formData, { headers: { "Content-Type": "multipart/form-data" }})
      .then((response) =>{
        // 当请求成功
        if (response.data.issuccess === "success") {
          //清空formData
          formData.delete("file");
        }
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
        // always executed
      });
    }
    //刷新展示页面
    this.onRefresh();
    //清空文件列表
    this.fileList = []
    setTimeout(() => {
      //关闭遮罩层
      this.show = false;
      //弹出提示
      Toast.success("上传成功");
    }, 1000);
  }
},

文件下载方法

1. 文件下载，我这里后台接口是通过id去获取文件，前端调用请求，将要下载的文件id传给后台。
2. 设置响应类型为responseType: ‘blob’，这里一定要定义，不定义为blob就拿不到文件流
3. 将获取到的’blob’结合window.URL.createObjectURL()方法使用，window.URL.createObjectURL(blob)创建一个文件下载的路径,定义下载的文件名，使用document.createElement(‘a’)创建一个a标签，a.href=url(下载的文件地址)，a.download = fileName(下载的文件名，自己定义的)，调用a.click()点击方法，就会下载一个文件。

//下载文件
 downloadFile(file) {
   //请求后台接口
   this.$http.get('/aeo_smart/ICommonApi.do?viewFile_chapter', {
     params: {
       fileid: file.id,
       subclassname: file.subclassname,
       fid: file.id
     },
     responseType: 'blob'	//定义响应类型
   })
   .then((response) =>{
   	 //拿到文件blob
     let blob = response.data
     //定义下载文件名
     let fileName = file.attachmenttitle + "." + file.extend;
     //判断IE保存方法还是其他浏览器保存方法
     if ('download' in document.createElement('a')) {
       //将blob传出获取文件下载地址
       var url = window.URL.createObjectURL(blob);
       
       //定义一个a标签
       var a = document.createElement('a');

       a.style.display = 'none';
       //将下载地址赋值给a标签的href
     　a.href = url;
     　//将下载文件的名字赋值给a标签的download
     　a.download = fileName;
     　//添加到body中
       document.body.appendChild(a)
       //调用a标签的点击方法
     　a.click();
       setTimeout(() => {
         window.URL.revokeObjectURL(url); // 释放URL 对象
         document.body.removeChild(a);	//移除a标签
       }, 1000);  //解决部分浏览器下载时“无此文件”问题

     } else {
       navigator.msSaveBlob(blob, fileName)
     }
   })
   .catch(function (error) {
     console.log(error);
   });
 },
}

文件删除方法

//删除文件
delFile(id) {
  //提示是否删除
  this.$dialog.confirm({
    message: '确定删除吗？',
  }).then(() => {
    //开启遮罩层
    this.show = true;
    //请求后台删除文件接口，通过文件id删除文件
    this.$http.get('/aeo_smart/ICommonApi.do?doDel', {
      params: {
        id: id
      }
    })
    .then((response) =>{
      // 当请求成功
      if (response.data.issuccess === "success") {
        //刷新页面
        this.onRefresh();
        setTimeout(() => {
          //关闭遮罩层
          this.show = false;
          //弹出提示
          Toast.success(response.data.result);
        }, 1000);
      }else {
      	//删除失败提示
        this.$notify(response.data.result);
      }
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
      // always executed
    });
  });
},

下一篇： vue移动端实现图片预览