解决上传文件显示有延迟，直接显示本地

最新推荐文章于 2024-05-10 15:47:34 发布

一起写代码不咯

最新推荐文章于 2024-05-10 15:47:34 发布

阅读量396

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_42135780/article/details/135101404

版权

正常的情况下，咋们上传文件都是上传完毕以后，再展示出来，这样如果文件太大，就会出现文件上传到显示出来有一段时间间隔，体验度很不好

elmentUI 的上传文件为例子

<el-upload
  class="avatar-uploader"
  action="/"
  :limit="1"
  :before-upload="beforeUpload"
  ref="uploadImage"
  :show-file-list="false"
>
  <img v-if="file" :src="file" class="avatar" />
  <div v-else>
    <i class="el-icon-plus avatar-uploader-icon"></i>
  </div>
</el-upload>

上传文件的时候，获取到文件file，拿到本地的地址转base64

beforeUpload(file) {
  let reader = new FileReader();
  //文件装载后将其显示在图片预览里
  reader.onload = (e) => {
    //将bade64位图片保存至数组里供上面图片显示，这里是base64编码，不是file文件本身哈
    this.file = e.target.result;
  };

  //将文件以DataURL形式读入页面
  reader.readAsDataURL(file);

  //这里才是真正的file文件
  this.refound.F = file;
  return false;
},

表单格式上传文件

    confirm() {
      let formData = new FormData();
      formData.append("file", this.file);
      formData.append("money", this.refound.money);
      this.$axios({
        url: "/index/Warrant/withdrawback",
        method: "post",
        dataType: "json",
        data: formData,
        headers: { "Content-Type": "multipart/form-data" },
      }).then((res) => {
         //处理业务逻辑
      });
    },