front end
one,
① First add a place to the page to display the picture
<el-table-column prop="upload" label="College Certification Materials"> <template slot-scope="scope" v-if=""> <el-image style="height: 30%;width:30%;margin-left:22%;" :src="src" v-for="(src, index) in (',')" :key="index" :preview-src-list="(',')"> </el-image> </template> </el-table-column>
② Add relevant attributes in data
data () { return{ searchForm:{ upload: '' }, loading: false, src: '' // Upload pictures}
two,
① Add the following code to the form
<el-col :span="12"> <el-form-item label="Upload pictures" prop="upload"> <el-upload list-type="picture-card" :action="`${this.$http.BASE_URL}/sys/file/webupload/upload?uploadPath=/upload`" :headers="{token: $('token')}" :before-upload="beforeUpload" :on-preview="(file, fileList) => { $alert(`<img style='width:100%' src=' ${( && ) || }'/>`, { dangerouslyUseHTMLString: true, showConfirmButton: false, closeOnClickModal: true, customClass: 'showPic' }); }" :on-success="(response, file, fileList) => { = (item => ( && ) || ).join('|') }" :on-remove="(file, fileList) => { $(`/sys/file/webupload/deleteByUrl?url=${( && ) || }`).then(({data}) => { $() }) = (item => ).join('|') }" :before-remove="(file, fileList) => { return $confirm(`Confirm to delete ${}?`) }" multiple :limit="1" :on-exceed="(files, fileList) =>{ $(`Current limit selection 1 Pictures,This time I chose ${} A file,A total of selected ${ + } Pictures`) }" :file-list="picArra"> <i class="el-icon-plus"></i> </el-upload> <el-dialog :="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-form-item> </el-col>
② Add relevant attributes in data
data () { return { picArra: [], dialogImageUrl: '', dialogVisible: false, disabled: false, inputForm: { upload: '', } } }
③ Replace the original this.$nextTick in the method
= true = false // Reset the image path, otherwise the last added image will be loaded = [] this.$nextTick(() => { this.$() if (method === 'edit' || method === 'view') { // Modify or view = true this.$http({ // upload is the annotation path of the controller layer, just replace it url: `/upload/queryById?id=${}`, method: 'get' }).then(({data}) => { = (, ) ('|').forEach((item) => { if (().length > 0) { ({name: decodeURIComponent((('/') + 1)), url: item}) } }) = false }) } }), // View pictures handlePictureCardPreview (file) { = = true }, continueDoSubmit () { this.$refs['inputForm'].validate((valid) => { if (valid) { this.$emit('addRow', , (())) this.$refs['inputForm'].resetFields() } }) }, //Judge the format of uploaded pictures beforeUpload (file) { if (file) { const suffix = ('.')[1] const size = / 1024 / 1024 < 2 if (['png', 'jpeg', 'jpg'].indexOf(suffix) < 0) { this.$('Uploading images only supports png, jpeg, and jpg formats! ') this.$() return false } if (!size) { this.$('The upload file size cannot exceed 2MB!') return false } return file } }
rear end
The backend only needs to add the corresponding fields, and the controller layer does not need to be changed.
This is the article about uploading Jeeplus-vue files. For more related vue files upload content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!