【vue】原生上传图片

 

/*
    因为上传请求的头是["multipart/form-data"]，所以要封装一个上传接口请求
*/

上传接口请求：
function uploadApiAxios (method, url, params, success, failure) {
  if (params) {
    params = filterNull(params)
  }
  axios({
    method: method,
    url: url,
    data: method === 'POST' || method === 'PUT' ? params : null,
    params: method === 'GET' || method === 'DELETE' ? params : null,
 
    // 允许请求的数据在传到服务器之前进行转 把Request PayLoad 转成 Form Data
    transformRequest: [function (params) {
        // return qs.stringify(params, {arrayFormat: 'brackets'});
        return params
    }],
 
    // 自定义的要被发送的头信息
    headers:{
        'Content-Type':'multipart/form-data'
    },
 
    baseURL: root,
 
    //　是否跨域请求
    withCredentials: false
  })
  
  .then(function (res) {
    
    if(res.data.errCode == 0){
      if(success){
        success(res.data)
      }
    }else{
      if(failure){
        failure(res.data)
      }
    }
 
  })
  .catch(function (err) {
    
  })
}  

// 返回在vue模板中的调用接口
export default {
  
  // 上传图片
  uploadPost: function (url, params, success, failure) {
    return uploadApiAxios('POST', url, params, success, failure)
  }
}

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


<el-form-item label="实图">
    <div class="uploadLine">
        <div>
              <img src="../assets/add.png" alt="" class="uploadPicture" v-if="!ruleForm.picture">
              <img :src="ruleForm.picture" alt="" v-else style="width:200px; height:200px;">
        </div>
        <input type="file" class="photoBtn" @change="uploadPhoto">
   </div>
</el-form-item> 

/**
*  上传图片
*/
uploadPhoto(e){
    console.log(e)

    var file = e.target.files[0]; // js获取文件对象

    var formData = new FormData();

    formData.append('file', file) // 添加字段与对应的值

    if(file.size > 307200){

        this.$message.error('上传图片不得超过200kb！');

        return false;
    }

    // 接接口
    this.$http.uploadFile(formData,(res)=>{

        this.ruleForm.picture = res.data.image

        this.$message.success(res);

    },(errRes)=>{

        this.$message.error(errRes);
    })
},