vue+element-ui 文件列表上传功能 总结

实现需求

图片需一张，一张上传，可删除，提交形式以String 方式提交到服务器

   <div>                <el-upload                  action="/api/upload/uploadImage"                  list-type="picture-card"                  :on-remove="handleRemove"                  :limit="20"                  :on-success="imgSuccess"                  ref="upload"                >                  <i class="el-icon-plus"></i>                </el-upload>                <el-dialog :visible.sync="dialogVisible">                  <img width="100%" :src="dialogImageUrl" alt />                </el-dialog>              </div>

<script>
import { asksave } from "../views/api/api";export default {  data() {    return {      dialogImageUrl: "",      dialogVisible: false,      imglistArr: []    };  },
  methods: {    handleRemove(file) {},    imgSuccess(res, file, fileList) {      this.imglistArr = fileList;    },    submit() {      if (!localStorage.getItem("token")) {        this.$message.error("请您先登录");      } else {        let urls;        if (this.imglistArr.length != 0) {          var imgArr = this.imglistArr.map((ele, index) => {            return ele.response.url;          });          urls = imgArr.toString();        } else {          urls = "";        }        let data = {          urls: urls,        };        asksave(data).then(res => {          if (res.msg == "success") {            this.$message.success("信息反馈成功，请等待客服联系");            this.$refs.upload.clearFiles();            return;          } else {            this.$message.error(res.msg + ",拨打网站下方联系方式");          }        });      }    }  },
}}


</script>