其他分享
首页 > 其他分享> > 前端element ui 文件base64加密字符串 上传

前端element ui 文件base64加密字符串 上传

作者:互联网

<el-form-item label="附件" prop="attachment">
              <el-upload
                :multiple="false"
                :limit="1"
                :on-exceed="handleExceed"
                :http-request="uploadFiles"
                :on-remove="handleRemoveFj"
                action="  "
              >
                <el-button slot="trigger" size="small" type="primary" >选择文件</el-button>
                <el-button v-show="formData.attachment != null" > <a  :href="'http:/localhost:8080/file'+formData.attachment">查看文件</a></el-button>
              </el-upload>
            </el-form-item>

 

 

 //图片上传数量校验
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
      },
      //取消上传文件
      handleRemoveFj(file,fileList){
        this.formData.fileContent = null;
      },

      //文件上传
      uploadFiles(data) {
        // this.formData.fileUpdate=1;              //更新状态 改为已更新
        this.formData.fileName = data.file.name;        //文件名
        this.formData.fileType = "updateNoticeFile";
        this.getBase64(data.file).then(resBase64 => {
          this.formData.fileContent = resBase64.split(',')[1]
          console.info(this.formData.fileContent)
          console.info(this.formData.fileContent.length)

        })
      },

      //文件转base64
      getBase64(file) {
        return new Promise((resolve, reject) => {
          let reader = new FileReader();
          let fileResult = "";
          reader.readAsDataURL(file);      //开始转
          reader.onload = function() {
            fileResult = reader.result;
          };      //转 失败
          reader.onerror = function(error) {
            reject(error);
          };      //转 结束  咱就 resolve 出去
          reader.onloadend = function() {
            resolve(fileResult);
          };
        });
      },

 

标签:文件,fileContent,formData,base64,element,length,ui,file,reader
来源: https://www.cnblogs.com/szc1998/p/15508818.html