Vue + Element-UI File list upload summary

Implementation requirements

One picture should be uploaded and deleted, and submitted to the server in the form of 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>Copy the code

<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("Please log in first.");      } 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("Information feedback is successful, please wait for customer service contact");            this.$refs.upload.clearFiles();            return;          } else {            this.$message.error(res.msg + ", dial the contact information at the bottom of the website"); }}); } } }, }} </script>Copy the code