使用element-ui的upload上传图片

最新推荐文章于 2024-05-01 02:01:08 发布

曹筱君

最新推荐文章于 2024-05-01 02:01:08 发布

阅读量247

点赞数 1

分类专栏： vue element-ui js 文章标签： html5 javascript

本文链接：https://blog.csdn.net/m0_53264079/article/details/126123682

版权

vue 同时被 3 个专栏收录

15 篇文章 1 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

element-ui

3 篇文章 0 订阅

订阅专栏

html代码

              <el-upload
                ref="upload"
                class="upload-demo"
                action
                :show-file-list="false"
                :on-change="handleAvatarSuccess"
                multiple
                :limit="1"
                :auto-upload="false"
              >
                <img
                  v-if="imageUrl"
                  width="100%"
                  :src="imageUrl"
                  class="avatar"
                >

                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>

js代码

    // 上传图片
    handleAvatarSuccess(file, fileList) {
      if (
        file.name.split('.').pop() !== 'png' &&
        file.name.split('.').pop() !== 'jpg'
      ) {
        // 类型有可能大写，记得要写
        fileList = []
        this.msgError('请上传.png及.jpg格式的文件')
      } else {
        this.imageUrl = URL.createObjectURL(file.raw)
        this.avatarUrl = fileList.length > 0 ? file.raw : []
        const formData = new FormData()
        formData.append('file', file.raw)
        addword(formData).then((res) => {
          if (res.data.code == 20001) {
            this.message(res.data.message)
          } else {
            this.avatarFilePath = res.data.data.fullPath
          }
        })
      }
    },