This is the seventh day of my participation in the August More text Challenge. For details, see: August More Text Challenge

preface

Using ElementUI already has a period of time, in the side to fit the development background management system’s colleague, also recorded some notes, has not time to sum up, the odd note into a more detail tutorial system, can be left to look at, just saw on the nuggets about August more challenge activity, After reading it, I was moved and decided to spend some time and energy to participate in this more meaningful activity.

In the development process, it is true that a large part of the documents are used. It is said that front-end development cannot be separated from documents. The important words say three times, must read more documents.

Vue+ElementUI build background management system (actual combat series seven) – upload pictures of the function

The Upload Upload: element. The eleme. IO / # / useful – CN/com…

In the VUE background management system, sometimes there will be a function of uploading pictures. The idea of doing this function is as follows: 1: It is preferred that the front end write an image upload tag, select the local image file after 2: call the interface to the back end, in the form of binary files to the back end server 3: server processing, After the processing is complete, add the host name of the server to the prefix of the image name. 4: Return a link with the server host + the image name to the front end, which can be accessed online. 5: The front end directly renders the online link path and displays the image on the interface

Concrete practice in vue-element-admin

1: Create a new API. Js in store/modules and write the interface to upload the image to the server

const baseUrl = 'http://39.xx.xxx.1xx/yyexploreplatform'
const state = {
  fileUpload: baseUrl + '/upload/file'
}

export default { state }
Copy the code

2: Open store/getters.js getters.js

const getters = {
  fileUpload: state => state.api.fileUpload,
}
export default getters

Copy the code

3: Create an index.vue page

Start writing code:

<template> <div class="app-container"> <el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px"> <el-form-item label=" Insert image "> <el-upload class="avatar-uploader" :action="fileUpload" :headers="{Authorization: token }" :show-file-list="false" :on-success="handleAvatarSuccess"> <img v-if="nextProjectForm.publicWelfareUrl" :src="nextProjectForm.publicWelfareUrl" class="avatar"/> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> </el-form> </div> </template> <script> import { mapGetters } from "vuex"; export default { data() { return { nextProjectForm: { publicWelfareUrl: "", }, }; }, computed: { ... mapGetters(["fileUpload", "token"]) }, methods: { handleAvatarSuccess(response, file, fileList) { if (response && response.data && response.data.url) { this.$set(this.nextProjectForm, "publicWelfareUrl", response.data.url); }}}}; </script> <style lang='scss'> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style>Copy the code

4: The effect is as follows:

5: Some business requirements are such that, given a picture size, such as the maximum width is 500, the maximum height is 300, if the size of the uploaded picture exceeds this range, when uploading, a prompt will be given, do not meet the size of the upload cannot be uploaded. This is where judgment comes in

You need to add a before-upload method to the upload file

Before-upload is used to limit the format and size of the images uploaded by the user.

Then write the implementation code of this method in the methods

/ / for the size of the picture limit handleImagesUrlBefore: function (file) {var _this = this; return new Promise(function(resolve, reject) { var reader = new FileReader(); reader.onload = function(event) { var image = new Image(); image.onload = function () { var width = this.width; var height = this.height; If (width>500){_this.$alert(' < 500! ', 'tip ', {confirmButtonText:' confirm '}); reject(); } if (height >300) {_this.$alert(' < 300! ', 'tip ', {confirmButtonText:' confirm '}); reject(); } resolve(); }; image.src = event.target.result; } reader.readAsDataURL(file); }); },Copy the code

Complete reference code:

<template> <div class="app-container"> <el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px"> <el-form-item label=" insert image "> <el-upload class="avatar-uploader" :action="fileUpload" :before-upload="handleImagesUrlBefore" :headers="{ Authorization: token }" :show-file-list="false" :on-success="handleAvatarSuccess"> <img v-if="nextProjectForm.publicWelfareUrl" :src="nextProjectForm.publicWelfareUrl" class="avatar"/> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </el-form-item> </el-form> </div> </template> <script> import { mapGetters } from "vuex"; export default { data() { return { nextProjectForm: { publicWelfareUrl: "", }, }; }, computed: { ... MapGetters ([" fileUpload ", "token"])}, the methods: {/ / for the size of the picture limit handleImagesUrlBefore: function (file) {var _this = this; return new Promise(function(resolve, reject) { var reader = new FileReader(); reader.onload = function(event) { var image = new Image(); image.onload = function () { var width = this.width; var height = this.height; If (width>500){_this.$alert(' < 500! ', 'tip ', {confirmButtonText:' confirm '}); reject(); } if (height >300) {_this.$alert(' < 300! ', 'tip ', {confirmButtonText:' confirm '}); reject(); } resolve(); }; image.src = event.target.result; } reader.readAsDataURL(file); }); }, handleAvatarSuccess(response, file, fileList) { if (response && response.data && response.data.url) { this.$set(this.nextProjectForm, "publicWelfareUrl", response.data.url); }}}}; </script> <style lang='scss'> .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .avatar-uploader .el-upload:hover { border-color: #409eff; } .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .avatar { width: 178px; height: 178px; display: block; } </style>Copy the code

If it does not fit the size, a pop-up will indicate it.