Fork me on GitHub

vue上传图片或文件

实例以element-ui为基础：

html:

<div class="importPDF">
    <el-dialog
      title="PDF数据导入"
      :visible.sync = showDataImportDialog
      center
      width="35%" style="left: 10%">
      <div>
        <label style="font-weight: bold;margin-right: 10px;">文      件:</label>
        <el-input v-model="fileName" size="mini" style="width:52%; margin-left: 18px"></el-input>
        <el-upload
          class="upload-demo"
          ref="upload"
          action="/pdf/upload"
          :show-file-list="false"
          :before-upload="beforeUpload">
          <el-button slot="trigger" size="mini" type="danger">选取文件</el-button>
        </el-upload>
         <el-form ref="pdfForm"  :model="pdfForm" >
           <el-form-item label="文件类别" style="margin-top: 10px">
             <el-select class="formItem" size="mini" placeholder="请选择文件类别" v-model="pdfForm.announcementType">
               <el-option v-for="item in announcementTypeOptions"
                          :key="item.value"
                          :label="item.key"
                          :value="item.value"></el-option>
             </el-select>
           </el-form-item>
         </el-form>
        <div style="margin-top: 10px">备注：仅限上传一个PDF文件</div>
      </div>
      <div slot="footer" style="text-align: center;">
        <!-- <el-button size="mini" @click="viewfile">预览</el-button> -->
        <el-button size="mini" type="primary" @click="upLoadpdf()">上传</el-button>
        <el-button size="mini" @click="showDataImportDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>

data:

data() {
      return {     
        pdfForm:{
          announcementType:""
        },
        announcementTypeOptions:[
　　　　　　　　{
         　　　　 value: '1',
         　　　　 key: '已发布'
        　　　　}, {
         　　　　 value: '0',
         　　　　 key: '未发布'
       　　　　 }
　　　　　　],
        showDataImportDialog:false,
        fileName:"",
      }
    },

 

methods:
uploadShow(){
        //点击上传显示
        this.showDataImportDialog=true
      },
      //上传PDF文件之前
      beforeUpload(file){
        console.log("文件", file);
        this.file = file;
        this.fileName = file.name;
        // this.fileSize = file.size;
        const extension = file.name.split('.').slice(-1) == 'pdf'
        if (!extension) {
          this.$message.warning('上传模板只能是pdf格式!')
          this.fileName = ''
          return
        }
        let reader = new FileReader();
        reader.readAsDataURL(file);
        let that = this;
        reader.onload = function() {
          that.fileData = reader.result;
        };
        return false; // 返回false不会自动上传
      },
      //预览文件
      viewfile(){
        console.log("viewFile");
        var win = window.open();
        win.document.write(
          '<body style="margin:0px;"><object data="' +
          this.fileData +
          '" type="application/pdf" width="100%" height="100%"><iframe src="' +
          this.fileData +
          '" scrolling="no" width="100%" height="100%" frameborder="0" ></iframe></object></body>'
        );
     
      },
      //上传文件按钮
      upLoadpdf(){
        if(this.fileName === ''){
          this.$message.warning('请选择要上传的文件！');
          return false
        }
        if(this.pdfForm.announcementType === ''){
          this.$message.warning('请选择文件类别');
          return false
        }
            let fileFormData = new FormData();
            fileFormData.append("file", this.file);
            fileFormData.append('announcementType',this.pdfForm.announcementType)
            fileFormData.append('fileLevel',this.pdfForm.fileLevel)
            uploadFile(fileFormData,{headers:{
              "Content-Type": "multipart/form-data"
            }}).then(res=>{  
             console.log(res)

　　　　　　　　this.showDataImportDialog=false;
              this.$message({message: res.data.msg,type: 'success'});

          }).catch(err => {
             failure('出现未知问题，刷新页面，或者联系程序员')
            console.log(err);
           });
      
      },

 

posted @ 2021-05-14 16:01  小白不白10  阅读(468)  评论(0)  编辑  收藏  举报