element ui 组件上传图片

官方文档：https://element.eleme.cn/#/zh-CN/component/upload

本例子使用照片墙组件ui 其他上传图片的ui组件类似

 注意使用的主要参数 action on-success on-error

action    必选参数，上传的地址    string

list-type    文件列表的类型    string    text/picture/picture-card    text （ui 组件的名称 此例子使用 照片墙 "picture-card"）

:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"

图片上传成功 与 失败时 的钩子函数
:on-success="handleSuccess"
:on-error="handleError"

限制图片上传的个数
:limit='1'

<!--

action	必选参数，上传的地址	string

list-type	文件列表的类型	string	text/picture/picture-card	text （ui 组件的名称 此例子使用 照片墙 "picture-card"）

:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"

图片上传成功 与 失败时 的钩子函数
:on-success="handleSuccess"
:on-error="handleError"

//限制图片上传的个数
:limit='1'
-->
<el-upload
           action="http://localhost:3000/images/uploadImg"
           list-type="picture-card"
           :on-preview="handlePictureCardPreview"
           :on-remove="handleRemove"
           :on-success="handleSuccess"
           :on-error="handleError"
           :limit='1'
           >
    <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>

export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
    };
  },
  methods: {
      //弹窗dialog 的函数
    handleRemove(file) {
      console.log(file);
    },
    //弹窗dialog 的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
      //弹窗dialog 的函数
    handleDownload(file) {
      console.log(file);
    },
      
     // 图片上传成功 与 失败时 的钩子函数
    handleSuccess(response, file, fileList) {
        //response 显示 原本的图片上传路径 返回的处理结果
        //成功上传将包含 文件的名称 filename
       console.log(response);
        //本例子的返回结果
        //{message: '图片上传成功', status: 1, filename: '1654136563661-03.jpg'}
        //{message: '图片上传失败,图片大小限制1000kb', status: 0}
    },
      
      //图片上传成功 与 失败时 的钩子函数
    handleError(err, file, fileList) {
      console.log(err);
    },
  },
};