vue中文件上传下载与回显

一.上传文件:

pc端

采用饿了么上传组件:<el-upload />

可以手动上传也可以立即上传

1.立即上传:

<el-upload
​
•            ref="myUpload"
​
•            :action="fileUploadApi + '?name=' + fileName"
​
•            :headers="headers" // 设置请求头{'Authorization': getToken()}
​
•            :on-error="uploadError"
​
•            :on-success="uploadSuccess"
​
•            :before-upload="uploadBefore" 
​
•            :on-change="uploadChange"
​
•            :on-remove="uploadRemove"
​
•            :file-list="fileList"
​
•            :auto-upload="true"
​
•          \>
​
•            <el-button slot="trigger" size="small" type="primary">附件上传</el-button>
​
•          </el-upload>

2.手动上传

一般点击确认按钮,监听这个按钮的点击事件,然后 this.$refs.myUpload.submit(),进行上传文件操作;

uploadSuccess方法监听文件上传成功的回调函数,接收三个回调参数,response, file, fileList,response是接口返回值,,

里面会返回服务器存放文件的id,把id存到表单对象里,最后做表单提交

移动端,vant组件里的<van-uploader />

Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

<van-uploader
​
•              @delete="onDelete"
​
•              v-model="fileList"
​
•              multiple
​
•              :after-read="afterRead"
​
•            />

文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。

data里定义fileId,用来存放上传文件返回的id
​

afterRead(*file*) {
​
•      // 此时可以自行将文件上传至服务器
​
•      console.log("file");
​
•      console.log(*file*);
​
•      *file*.status = "uploading";
​
•      *file*.message = "上传中...";
​
•      *const* fd = new *FormData*();
​
•      fd.append("files", *file*.file);
​
•      upload(fd)
​
•        .then(*res* *=>* {
​
•          *file*.status = "done";
​
•          *file*.message = "上传成功...";
​
•          // console.log(res.data[0], '文件上传');
​
•          this.fileId.push(*res*.data[0].id);
​
•        })
​
•        .catch(() *=>* {
​
•          // 上传失败
​
•          *file*.status = "failed";
​
•          *file*.message = "上传失败";
​
•        });
​
•    },
    onDelete(file, detail) {
      if (file.status == "failed") return;
      this.fileId.splice(detail.index, 1);
    },

二.文件下载

1.如果下载需要权限

export *function* downloadFile(*obj*, *name*, *suffix*) {
​
  *const* url = window.*URL*.createObjectURL(new *Blob*([*obj*]))
​
  *const* link = document.createElement('a')
​
  link.style.display = 'none'
​
  link.href = url
​
  *const* fileName = parseTime(new *Date*()) + '-' + *name* + '.' + *suffix*
​
  link.setAttribute('download', fileName)
​
  document.body.appendChild(link)
​
  link.click()
​
  document.body.removeChild(link)
​
}
​
downloadFile: function(id, name, suffix) {
  meetingApi.downloadAttach(id).then(res => {
    const blob = new Blob([res])
    const url = window.URL.createObjectURL(blob)
    const dom = document.createElement('a')
    dom.style.display = 'none'
    dom.href = url
    dom.setAttribute('download', name + '.' + suffix)
    document.body.appendChild(dom)
    dom.click()
  })
},

2.下载不需要权限,直接打开新网页的方式就行了

 window.location.href = `${process.env.VUE_APP_BASE_API}/api/localStorage/downloadFile/${id}`

三.文件回显

以移动端为例,

<van-uploader
 v-model="fileList"
 preview-size="75px"
 show-upload
 :deletable="false"
 @click-preview="clickPreview"
 >
  <div
 v-if="fileList.length === 0"
 style="color:#000;font-size:14px;"
 >
 附件无
  </div>
  <div v-else />
</van-uploader>

这里是监听父组件传过来的formdata对象,里面的fj字段存放文件的id,拿这个id去获取文件的信息

watch: {
    formData: {
      handler(newVal) {
        console.log(newVal);
        const fm = new FormData();
        fm.append("ids", newVal.fj);
        getFileStorage(fm).then(res => {
          if (!res.data) return;
          const resData = res.data;
          resData.map(item => {
            item.url = process.env.VUE_APP_BASE_API + item.url;
          });
          this.fileList = resData;
        });
      },
      immediate: true,
      deep: true
    }
  },

预览方法,如果是图片可以直接预览,其它类型文件需要借助其它的方法

clickPreview(file) {
      console.log("预览", file);
      // window.open("/editor/#/reader?fileId=xxx");
    }