vue+elementUI upload图片

element 提供了upload 的样式

element 提供了图片上传样式,鼠标放在 图片上,可以实现预览大图, 删除错误图片的功能

公司业务逻辑要上传阿里云

1,阿里云请求要配置请求参数,
2,不同于elemnt upload 组件只填写一个action 的方式,
参见代码

官网代码

现在来说一下我的实现方式,也能预览,也能上传,还要把字段传递给后端

1. upload 有一个 on-change的方法, 绑定方法, 会返回一个file, 和fileList , 要使用的是file ,
2. 因为用户如果要删除, 这个on-change 方法也会触发,
3. 阿里云是一个图片一个图片的上传的, 批量上传要重新命名,这个就很尴尬.3张图片一起点确定上传的话, 命名就会一样.为了防止这个bug, 配合阿里云上传, 需要on-change 事件里面的file,自己新建一个obj , obj= file
   然后在写一个确定按钮, 这个确定按钮,执行的就是上传到阿里云的操作

getFile(e) {
      const _this = this
      var file = e.target.files[0]
      console.log('file', e.target.files)
      var myTime = new Date()
      var iYear = myTime.getFullYear()
      var iMonth = myTime.getMonth() + 1
      var iDate = myTime.getDate()
      var iHours = myTime.getHours()
      var iMin = myTime.getMinutes()
      var iSec = myTime.getSeconds()
      var TDATE = ''
      TDATE = iYear + '-' + iMonth + '-' + iDate + iHours + iMin + iSec
      var FEName = file.name
      var suffix = FEName.substring(FEName.lastIndexOf('.'))
      var client = new OSS.Wrapper({
        accessKeyId: localStorage.getItem(XXX'),
        accessKeySecret: localStorage.getItem('XXX'),
        stsToken: localStorage.getItem('XXX'),
        endpoint: '阿里云上传域名',
        bucket: '筒名'
      })
      client.multipartUpload('ccd/' + TDATE + suffix, file).then(function(result) {
        if (!e || !window.FileReader) return // 看支持不支持FileReader
        const reader = new FileReader()
        reader.readAsDataURL(file) // 这里是最关键的一步，转换就在这里
        reader.onloadend = function(a) {
          console.log(44, a)
        可以写一些改变页面视图的操作
        }
        _this.$message('上传成功')
      }).catch(function(err) {
        console.log(err)
      })
    },

以上是完整的input type= file 上传到阿里云的代码逻辑,自己使用的时候, 分成了两个函数, 一个叫changeName 一个叫uploadAliyun 分别执行, 不然这个方法真的太庞大了.
从这个图片上传,我得到的知识点是, 在on-change 的时候,获取file , 将file 重命名传给后端, 然后点击确定, 将新名字传递给阿里云,上传到阿里云,
我的页面

实现页面

下面的input 框, 应该是不展示的, 为了方便调试, 展示给用户的时候,还是不可见比较好

bug

如果上传了发现图片不对, 就不要点确定, 直接删除, 如果点了确定, 就删除不了了额, 尴尬, 这个待优化, 过两天再研究一下好了