elementui 上传图片 合集

一. 上传图片 列表缩略图

1.图片列表缩略图html结构：

 <!-- 图片列表缩略图 -->
            <!-- :action="uploadURL"图片上传地址   :on-preview="handlePreview"点击预览   :on-remove="handleRemove"删除图片  list-type="picture"回显图片的方式是显示图片   -->
            <!-- :headers="headerObj"设置上传的请求头   :on-success="handleSuccess"文件上传成功的钩子函数 -->
            <el-upload :action="uploadURL" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture" :headers="headerObj" :on-success="handleSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>

 预览图片的对话框的html结构：预览图片是用弹出对话框来做的

 <!-- 图片预览 -->
    <el-dialog title="图片预览" :visible.sync="previewVisible" width="50%">
      <img :src="previewPath" alt="" class="previewImg" />
    </el-dialog>

2.data里面定义的参数：

接口根路径uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload'是需要根据自己项目来变化，一般是上传到一个封装的oss接口里面，这里是直接上传到图片接口

export default {
  data() {
    return {
// 上传图片的URL地址（接口根路径http://127.0.0.1:8888/api/private/v1/  +  图片接口upload）
      uploadURL: 'http://127.0.0.1:8888/api/private/v1/upload',
      // 图片上传组件的headers请求头对象（将浏览器的token当做请求头拿出来给headerObj，这样上传图片就有请求头了）
      headerObj: {
        Authorization: window.sessionStorage.getItem('token'),
      },
      // 预览图片的图片源
      previewPath: '',
      // 显示与隐藏预览图片的对话框
      previewVisible: false,
  addForm: {
 // 图片的数组
        pics: [],
   },
 }
  },

3.预览图片的钩子函数：

 // 处理图片预览效果
    handlePreview(file) {
      console.log(file)
      this.previewPath = file.response.data.url
      //打开弹出对话框
      this.previewVisible = true
    },

4.删除图片的钩子函数：

// 删除图片的操作
    handleRemove(file) {
      // console.log(file)
      // 1. 获取将要删除的图片的临时路径，tmp_path一般表示要删除的图片
      const filePath = file.response.data.tmp_path
      // 2. 从 pics 数组中，如果找到即将要删除的图片路径，就返回图片对应的索引号
      const i = this.addForm.pics.findIndex((item) => item === filePath)
      // 3. 调用数组的 splice 方法，把图片信息对象，从 pics 数组中移除
      this.addForm.pics.splice(i, 1)
      console.log(this.addForm)
    },

5.监听图片上传成功的事件

 // 监听图片上传成功的事件
    handleSuccess(response) {
      console.log(response)
      // 1. 拼接得到一个图片信息对象（对象）
      const picInfo = { pic: response.data.tmp_path }
      // 2. 将图片信息对象，push 到pics数组中（将对象添加到数组中）
      this.addForm.pics.push(picInfo)
      console.log(this.addForm)
    },

注意：图片上传后会返回两个参数：tmp_path ， url

tmp_path 是临时存放图片的地址

url  图片的预览可以用这个地址

二.  上传图片  用户头像上传 （每次只能上传一张图片）

（看看就行，这种是最简单的上传，连预览和删除都没有）

1. 用户头像上传的html结构：

 <div>
              <!-- 上传图片 -->
              <el-upload class="avatar-uploader" ref="otherLicense" :auto-upload="false" action :on-change="otherSectionFile" :show-file-list="false" :limit="1">
                <!-- 展示图片 -->
                <img class="avatar" v-if="form.cover" :src="form.cover" style="width: 200px; height: 200px" />
                <!-- 如果没有图片传过来，就显示+号 -->
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <p style="padding-top: 20px">建议尺寸（400*400）</p>
            </div>

2.data里面定义的参数：

export default {
 data() {
 return {
 form: {
  //图片
        cover: '',
},
imageUrl: '',
    },
    }
  },

3.methods里面写：（这里的上传接口是上传到oss里面去的，这是一个解析base64图片的地方，不用管这个东西，你只要知道自己上传的图片是上传到这里去就可以了）

 // 上传图片的验证规则
    otherSectionFile(file) {
      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg']
      const isJPG = typeArr.indexOf(file.raw.type) !== -1
      const isLt3M = file.size / 1024 / 1024 < 30
      if (!isJPG) {
        this.$message.error('只能是图片!')
        this.$refs.otherLicense.clearFiles()
        return
      }
      if (!isLt3M) {
        this.$message.error('上传图片大小不能超过 30MB!')
        this.$refs.otherLicense.clearFiles()
        return
      }
      let that = this
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      // 调接口上传图片
      uploadFile({ dir: 'zhongtian' }).then((res) => {
        if (res.code == 0) {
          this.$ossRequest(res.data, file.raw)
            .then((res) => {
              loading.close()
              //将接受过来的会先图片传给form.cover
              that.form.cover = res
              this.$refs.otherLicense.clearFiles()
            })
            .catch((res) => {
              loading.close()
              this.$message.error('上传失败')
            })
        } else {
          this.$message.error(res.msg)
        }
      })
    },

4.上传图片的一些样式：

<style scoped>
/* 上传图片组件 */
/deep/ .el-upload {
  width: 200px;
  height: 200px;
}

/* 上传图片的中心十字 */
/deep/ .avatar-uploader-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
}
</style>