关于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 = ''
  },

   

照片墙

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px">
    <el-form-item label="图片" prop="image_url">
       <el-upload
           ref="image"
           action="https://up-z0.qiniup.com"
           :data="image_postData"
           list-type="picture-card"
           accept=".png,.jpeg"
           :file-list="image_fileList"
           :limit="2"
           :before-upload="beforeImagePhotoUpload"
           :on-success="handleImagePhotoSuccess"
           :on-remove="handleRomeveImagePhoto"
       >
        <i class="el-icon-plus"></i>
       </el-upload>
    </el-form-item>
</el-form>
<script>
export default {
    data(){
        return {
            ruleForm: {
               image_url: '',
            }，
            image_fileList: [],
        }
    }，
    methods:{
        beforeImagePhotoUpload(file) {
          this.image_postData.key = 'system_gifts/' + new Date().getTime() + '.' + this.getFileType(file.name)
        },
        handleRomeveImagePhoto() {
          this.image_fileList = []
          this.ruleForm.image_url = ''
        },
        //图片上传成功后掉用的函数
        handleImagePhotoSuccess(res) {
           //res为服务端返回的结果，通过image_url判断来控制图片的显示，如果有
          if (this.ruleForm.image_url) {
            this.image_fileList = [
              {
                url: process.env.VUE_APP_file_URL + res.key
              }
            ]
          }
          this.ruleForm.image_url = process.env.VUE_APP_file_URL + res.key
        },
    }
}
</script>
 

　　

关于上传文件

• 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()
      }
  ​
  },

•