el-upload 的两种使用方式

1            <el-upload 
          show-file-list="false" 
          list-type="picture"
          class="upload-demo" 
          :action="upload" 
          :on-preview="handlePreview" 
          :on-remove="handleRemove" 
          :file-list="fileList" 
          :on-success="(response, file, fileList) => handleAvatarSuccess('head', response, file, fileList)" 
          :limit="1">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"></div>
          </el-upload>

on-success 传更多的值， :on-success="(response, file, fileList) => handleAvatarSuccess('head', response, file, fileList)" 

response, file, fileList 是原本的参数

    handleAvatarSuccess(field, response, file, fileList) { 
      console.log(response)
      console.log('field=' + field)
      var url = this.img_url_head + response.v
      this.$forceUpdate()
      this.$set(this.obj, field, url)
    },

2   before-upload中自己上传

      <el-upload 
        class="avatar-uploader" 
        action="http://localhost:1990/upload" 
        :show-file-list="false" 
        :on-success="handleAvatarSuccess" 
        :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

 

beforeAvatarUpload(file) { 

     let param = new FormData(); //创建form对象

      param.append('file', file, file.name); //通过append向form对象添加数据
      //param.append('chunk', '0'); //添加form表单中其他数据 
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }; //添加请求头

      var that = this
      console.log(this.upload)
      this.$axios.post(this.upload, param, config)
        .then(response => {
          console.log(response.data)
         // var url = that.img_url_head + response.data.v
         // that.imageUrl = url 
        })
      return false
    },

 

------------------------------

美化上传按钮的样式：https://blog.youkuaiyun.com/chendeyou5/article/details/80168504

 
 
    .ui-upload {
      height: 30px;
      width: 80px;
      background-color: #00abff;
      font-size: 14px;
      line-height: 30px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 3px;
      margin-left: 20px;
    }
   

 <label class="ui-upload">upload<input type="file" style="display: none;" /></label>

样式居然会被覆盖，这是为何？？？？？？？

 

<label style="display: inline-block;height: 30px; width: 80px;  background-color: #00abff; font-size: 14px; line-height: 30px; cursor: pointer; text-align: center; color: #fff; border-radius: 3px; margin-left: 20px;">upload<input type="file" style="display: none;"  @change="update($event,'head')" /></label> 

这样总可以

//-------图片-------

    update: function(e, point_name) {
      let file = e.target.files[0];
      let param = new FormData();            //创建form对象
      param.append('file', file, file.name); //通过append向form对象添加数据
      //param.append('other', '0');          //添加其他数据 
      let config = {
        headers: { 'Content-Type': 'multipart/form-data' }
      }; //添加请求头

      var that = this
      console.log(this.upload)
      this.$axios.post(this.upload, param, config)
        .then(response => {
          console.log(response.data)
          that.upload_success(response.data, point_name)
        })
    },
    // 图片上传成功
    upload_success(data, point_name) {
      if (data.s == "0") {  
        var url =this.img_url_head + data.v  
        //如果该字段，之前的obj中没有，则需要使用 $set 更新，视图才能刷新
        this.$set(this.obj, point_name, url)
        console.log(this.obj.image)
      }
    },