element-ui 实现单张上传

最新推荐文章于 2025-04-26 16:58:19 发布

原创最新推荐文章于 2025-04-26 16:58:19 发布 · 948 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ui #javascript #vue.js

这篇博客介绍了如何在Vue项目中使用Element-UI组件库实现单张图片的上传功能，包括设置上传地址、自定义样式、预览、移除图片、限制上传数量等操作，并展示了相关的HTML、JavaScript和CSS代码片段。

element-ui 实现单张上传

之前写了ant-design of vue自定义上传，今天element-ui的也安排上

html：

<el-form-item label="图片上传" prop="imgUrl">
	<el-upload
     :action="picUrl"
     :headers="headers" 
     :on-preview="handlePictureCardPreview"
     :file-list="imgList"
     :on-success="uploadPictureSuccess"
     :show-file-list="true"
     :on-remove="handleRemove"
     :on-change="uploadPictureChange"
     list-type="picture-card"
     :class="{ hide: hideUpload }"
     :limit="1"
     >
       <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
       <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
 </el-form-item>

javascript：

import { mapGetters } from 'vuex'
export default {
  name: "uploadImg",
  computed: {
    ...mapGetters(['token']),
    headers() {
        return {
            "Authorization": this.token
        }
    },
  },
  data() {
    return {
      // 图片上传
      hideUpload:false,
      limitCount:1,
      dialogImageUrl: '',
      dialogVisible: false,
      imgList:[],
      picUrl: '....',
   }
 }，
 methods：{
 	// 图片上传
    
    handlePictureCardPreview(file) {
      console.log(file,file.url)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadPictureChange(file,fileList){
      this.hideUpload = fileList.length >= this.limitCount;
    },
    uploadPictureSuccess(res,file){
      var _this = this
            if (file.status == "success") {
              _this.$message({
                message:'上传成功',
                type:'success'
              })
            }
            //  _this.form.url = res.msg
          
    },
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount;
      //this.form.url = ''
      console.log(file, fileList);
    },
 }
}

css

<style lang="scss" scoped>
::v-deep .hide .el-upload--picture-card{
  display: none;
}
</style>