关于elementui 上传文件和图片

上传图片类型的

单个图片

• html

  //data上传时附带的额外参数 可在上传文件之前的钩子函数before-upload 中设置，上传成功可在on-success中写相应的逻辑
  <el-upload
     class="avatar-uploader"
     action="https://up-z0.qiniup.com"
     :data="image_postData"
     accept=".png,.jpeg"
     :show-file-list="false"
     :before-upload="beforeImagePhotoUpload"
     :on-success="handleImagePhotoSuccess"
  >
      <img v-if="ruleForm.image_url" :src="ruleForm.image_url" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon">i>
  el-upload>

• js

  beforeImagePhotoUpload(file) {
    this.image_postData.key = 'system_gifts/' + new Date().getTime() + '.' + this.getFileType(file.name)
  },
  handleRomeveImagePhoto() {
    this.image_fileList = []
    this.ruleForm.image_url = ''
  },

照片墙

关于上传文件

• html

  <el-form-item label="上传文件">
      <el-upload class="upload-demo" action="#" accept=".xls,.xlsx" :file-list="fileList"
                 :http-request="handeleRequest" :on-remove="handleRemove" :before-remove="beforeRemove"
                 :on-change="handleChange">
          <el-button size="small" type="primary">点击上传el-button>
          <div slot="tip" class="el-upload__tip">只能上传.xls,.xlsx文件div>
      el-upload>
  el-form-item>

   

• js

  async handeleRequest({ file, name, raw }) {
      //发送请求的参数格式为FormData
      const formData = new FormData()
    //前面的file对应的是 后端给的路径名称，一定要注意，后面的file是文件  
      formData.append('file', file);
      try {
          // 调用param中的钩子函数处理各种情况，这样就可以用在组件中用钩子了。也可以用res.code==200来进行判断处理各种情况
          const res = await this.$api.finance.postExcelReq(formData)
          this.isFile = true
          this.tableData = res.data.array
          // let urlss = URL.createObjectURL(raw);
          // console.log(urlss);
          // this.fileList = [{name:name,url:URL.createObjectURL(raw)}]
          this.dialogTableVisible = true
      } catch (error) {
          this.clearAll()
      }
  ?
  },

•