Vue upload 文件上传 , 预览(打开新窗口预览图片)

阳光下的雨u

已于 2022-05-06 14:43:59 修改

阅读量4.1k

点赞数 2

文章标签： vue.js

于 2022-04-19 15:51:49 首次发布

本文链接：https://blog.youkuaiyun.com/smile2333/article/details/124274632

版权

本文档展示了如何使用AntDesign of Vue组件库实现图片上传功能，包括设置上传参数、自定义上传请求、文件预览及图片转换为Base64。通过`<a-upload>`组件结合`custom-request`属性，可以实现与后端接口的交互，并通过`handlePreview`方法处理图片预览。同时，提供了文件上传成功后的处理逻辑，以及图片预览的弹窗实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传: 这里以Ant Design of Vue 为例



 <a-upload :file-list="fileList" action="#" accept=".png" :custom- request="handleUpload3"  @preview="handlePreview" :showUploadList="false">
   <a-button> <a-icon type="upload"></a-icon> 上传 </a-button>
 </a-upload>
//图片预览弹框
<a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>

// fileList:[] 上传的文件

// action="#" 上传地址

// accept='.jpg' 上传类型

// custom-request 自定义上传方法

// @preview: 文件预览

// showUploadList: 是否显示上传后列表

// Headers: { 'content-type': 'multipart/form-data' } 设置上传的请求头部

  // 上传
    async handleUp(file) {
      const fileData = new FormData();
      fileData.append('file', file.file);
      const res = await this.$axios.post('/sys-storage/upload', fileData, {
        Headers: { 'content-type': 'multipart/form-data' },
      });
     
      if (!res.status) file.onError();
      file.onSuccess();
      const files = res.data;  //upload 上传成功后的数据
      let params = {   // 接口参数 
        token: files.fileToken,
        pId: '',
        name: files.fileName, 
      };
      this.$axios.post(params).then(res => {
        // 调用后端上传接口存储信息
        if (res.status) {console.log('上传成功')}
      });
    },

 // 预览
  async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await this.getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview; // 图片地址赋值
      this.previewVisible = true;    //预览弹框打开
    },

   getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
      });
    },

//打开新窗口预览图片
 const imgWindow = window.open('');
 imgWindow && imgWindow.document.write(`<image src='${图片地址}' style='display: flex; margin: 0 auto'/>`);