Shulou(Shulou.com)06/01 Report--

This article mainly introduces the VUE+element-ui file upload code how to write the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this VUE+element-ui file upload code how to write the article will have a harvest, let's take a look at it.

Picture upload (ImageCropper)

The previous end code encapsulates the file upload itself. You only need to configure the back-end interface requirement URL and the corresponding processing function after the image is uploaded successfully. The backend returns the image access address generated by OSS, and then the cropsuccess function displays the uploaded image.

Change avatar / / introduce calling API layer: teacher.js file import ImageCropper from'@ / components/ImageCropper'import PanThumb from'@ / components/PanThumb' export default {components: {ImageCropper, PanThumb}, data () {return {teacher: {}, saveBtnDisabled:false, / / whether imagecropperKey:0 is disabled by the save button / / upload component key values imagecropperShow:false, BASE_API:process.env.BASE_API, / / obtain the address in dev.env.js saveBtnDisabled:false / / whether the save button is disabled,}} Methods: {close () {/ / method for closing upload pop-up box this.imagecropperShow=false / / upload component initialization: prevent continuous upload of modified avatars this.imagecropperKey = this.imagecropperKey+1}, / / method cropSuccess (data) {this.imagecropperShow=false / / after uploading successfully Data returned by backend interface (url) is similar to response this.teacher.avatar = data.url / / upload component initialization this.imagecropperKey = this.imagecropperKey+1},}}

File upload (el-upload) excel template instructions Click to download the template and select the file to upload to the server export default {data () {return {BASE_API: process.env.BASE_API / / Interface API address importBtnDisabled: false, / / whether the button is disabled, loading: false}}, created () {} Methods: {/ / Click the button to upload the file to the API submitUpload () {this.importBtnDisabled = true this.loading = true / / js: document.getElementById ("upload") .submit () this.$refs.upload.submit ()} / / successfully uploaded fileUploadSuccess (response) {/ / prompt message this.loading = false this.$message ({type: 'success' Message: 'successfully added course classification'}) / / redirect course category list / / routing jump this.$router.push ({path:'/subject/list'})} / / upload failed fileUploadError () {this.loading = false this.$message ({type: 'error', message:' failed to add course classification'})}

Be careful

The value of the name attribute must be the same as the variable name of the backend interface parameter MultipartFile, otherwise the mapping cannot match the passed value.

The front-end identifier attribute value is consistent with the back-end parameter name (attribute name in the entity class), otherwise the parameter cannot be directly mapped, resulting in no data to be received by the backend.

This is the end of the article on "how to write the code for uploading VUE+element-ui files". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to write the code uploaded by VUE+element-ui files". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.