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

上传: 这里以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'/>`);