Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how Vue uses the Element-ui form to send data and multiple pictures to the back end of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you will learn something after reading this article, let's take a look at it.

Effect picture

The front end needs to send the product name, price, description and picture to the back end.

Front-end preparation, using the form function and upload function in Element-ui, the upload code is nested in the form, as follows

Create cancellation now

It should be noted that the action in upload passes the corresponding backend interface.

Before uploading an image, you need to convert the image into a string in base64 format and then upload it to the backend. Here, the beforeProductUpload function is defined for transcoding.

BeforeProductUpload (file) {var _ this = this return new Promise (function (resolve, reject) {var reader = new FileReader () reader.readAsDataURL (file) / / here is the most critical step, converted to base64 reader.onload = function (event) {_ this.Form.imageurl.push (event.target.result) / / define parameters to get the image path}})

The code for the script section

Export default {data () {return {Form: {name:'', imageurl: [], price:'', description:''}, dialogImageUrl:'', dialogVisible: false} }, methods: {handleRemove (file, fileList) {/ / remove console.log (file, fileList);}, handlePictureCardPreview (file) {/ / Image Preview this.dialogImageUrl = file.url; this.dialogVisible = true }, beforeProductUpload (file) {var _ this = this return new Promise (function (resolve, reject) {var reader = new FileReader () reader.readAsDataURL (file) / / this is the most critical step Convert to base64 reader.onload = function (event) {_ this.Form.imageurl.push (event.target.result) / / define parameters to get the image path}, submit () {var form = {name:this.Form.name, imgdata: this.Form.imageurl, price:this.Form.price Description:this.Form.description} this.$axios.post ('/ api/users/addProduct',form) .then (res= > {console.log (res.data) this.$message ('released successfully') this.Form = 'console.log (' uploaded successfully')}

Define an imageurl array to receive the incoming image base64 code, and then save it in the form object and pass it to the Node backend to save it in the database. Here I use the mongodb database. You can see that the data has been transferred to the database. Imgdata is the object that stores the image base64.

These are all the contents of the article "how Vue uses Element-ui forms to send data and multiple pictures to the back end". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.