elementUI el-upload组件应用

el-upload组件

1. el-upload组件说明

<el-upload
  class="avatar-uploader" // 自定义组件样式
  action="https://jsonplaceholder.typicode.com/posts/"  // 上传附件服务器端地址
  :show-file-list="false" // 图片是否是列表展示
  :on-success="handleAvatarSuccess" // 图片上传成功后的回调处理
  :before-upload="beforeAvatarUpload" // 图片上传前的回调处理
  :http-request="httpRequest" // 自定义上传行为，此时action和on-success无效了，action是必须项目，留空即可
>
  <img v-if="imageUrl" :src="imageUrl" class="avatar">  <!-- 显示上传好图片 -->
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>  <!-- 大+号图片 -->
</el-upload>

• 上述el-upload上传图片组件内部给集成了ajax，请求方式为post，会自动带着被上传的附件到达服务器端存储。
• 由于api接口要求是 patch方式请求，故组件的默认请求不能使用，要通过 http-request自定义上传行为，其会覆盖默认行为，这样形式上 action和 on-success可以不定义，但是action属性是必须的，应用上留空即可。

2. el-upload组件应用

2.1. 自定义上传

案例：

​ 利用el-upload组件完成用户头像上传

步骤：

1. 应用el-upload组件标签

   <div id="rt">
       <el-upload
                  action=""
                  :show-file-list="false"
                  :http-request="httpRequest"
                  >
           <!--判断是否有图像并展示，否则展示+号-->
           <img v-if="accountForm.photo" :src="accountForm.photo" class="avatar" width="200" height="200">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
   </div>
   

   • 给el-upload声明http-request属性 并设置methods的httpRequest方法，表示自定义上传行为。

2. 在methods中创建httpRequest()方法，实现上传

   // 更新上传用户头像
   // @resource:被上传头像图片的文件资源信息
   httpRequest (resource) {
       // console.log(resource)
       // 通过resource获得被上传图片对象
       let pic = resource.file
   
       // 利用 axios+FormData 实现图片上传
       let fd = new FormData()
       // 把图片对象放到fd对象里边
       fd.append('photo', pic)
       // axios上场
       let pro = this.$http({
           url: '/mp/v1_0/user/photo',
           method: 'patch',
           data: fd
       })
       pro
           .then(result => {
           // console.log(result)
           // 成功提示
           this.$message.success('头像更新成功')
           // 更新显示新头像
           this.accountForm.photo = result.data.data.photo
       })
           .catch(err => {
           return this.$message.error('更新账户头像失败：' + err)
       })
   },
   

2.2. 默认行为上传

案例：

​ 实现素材图片上传操作

• 对el-upload组件的相关属性进行配置，通过默认行为上传素材图片

注意：

1. 默认上传行为要执行自己的ajax，而服务器端处于认证考虑，要求传递token，这样还要给el-upload额外设置属性，具体为headers。
2. 服务器端要求上传图片要通过“image”名称进行传递，默认是"file"名称，具体要通过name属性配置。

步骤：

1. 应用上传图片组件

  <!--卡片区-->
  <el-card class="box-card">
    <!--命名插槽，头部内容设置-->
    <div slot="header" class="clearfix">
      <span>素材管理</span>
      <!--
        默认上传动作
        1. action设置地址
        2. 需要传递token信息，通过headers属性设置
        3. 通过name属性设置被上传图片的传递名字,服务器端要求是image
        4. :show-file-list="false" 禁止形成列表效果
        5. on-success 文件上传成功后回调处理
      -->
      <el-upload
        style="float: right; padding: 3px 0"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers="setToken"
        name="image"
        :show-file-list="false"
        :on-success="onSuccess"
      >
        <el-button size="small" type="primary">上传图片</el-button>
      </el-upload>
    </div>

2. 在computed计算属性中给上传ajax设置token

computed: {
    setToken () {
        let token = JSON.parse(window.sessionStorage.getItem('userinfo')).token
        return { Authorization: 'Bearer ' + token }
    }
},

3. 在methods中定义onSuccess()方法，待图片上传做提示并刷新显示

   // 素材上传完毕的回调处理
   onSuccess () {
       this.$message.success('图片上传成功！')
       this.getImageList() // 刷新图片
   },
   

注意：

​ 针对相同的图片不要重复上传，服务器端不给处理。