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

How to parse the upload components in element-ui transfer files and other parameters, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

Recently, the project used vuethink, which integrated element-ui, used the bootstrap framework all the time, had little knowledge of js, and then used vue.js, but also did not learn thoroughly, and then went to the pit.

Here is an analysis of the problems I encountered in using element-ui and the solutions.

First of all, there is a brief introduction to upload components on the official website of element-ui.

Click upload to upload only jpg/png files, and do not exceed 500kb

In fact, upload just encapsulates input type= "file" with several layers of style.

One action url

The first thing I don't understand is url in action. I use PHP in the background. According to my later understanding, this url is actually the upload function used by your PHP, just like the action in form. The difference is that I have been looking for it for a long time and haven't found out if I can change the default post delivery mode.

When the file is received, other parameters are passed. One is url.

Passing parameters to the url provided by PHP is the most directly imaginable way, but because action is in post mode, and url,post in restful mode, which I use in PHP background, is unable to transfer parameters, I have tried several ways but failed, and I don't know how to change it to get mode.

The first option can only be abandoned.

Option 2 does not use action

Give up action, after looking for a lot of information, we found that we can not use action, but use the before-upload attribute, which is a property of type function. The default parameter is the current file. As long as you can transfer this file, you can achieve the effect.

To pass this method, you need to new a formdata object, and then append key and value to the object, just like when you test postman

The specific examples given by someone on the Internet are similar to the following

BeforeUpload (file) {let fd = new FormData () fd.append ('key', file, fileName) axios.post (url, fd. {/ / do some operations}) return false / / false just does not upload automatically. I later tried to find that they are all the same, and they will not upload automatically.

This feeling can be tried, and then I took it for granted to write about it.

BeforeUpload (file,id) {let fd = new FormData () fd.append ('key', file, fileName) axios.post (url, fd. {data: {id:id}}) return false / / false just does not upload automatically. Later, I tried to find that they are all the same, and they will not upload automatically.

Then I found that I could only pass id no matter what, and dump (_ FLIES) in the PHP code was always NULL, which was very angry. After checking it for a long time, I found that the Content-Type I used should be multipart/form-data, while the debug page in F12 was application/json; charset=utf-8. I thought this was the problem, so I added headers to the code.

BeforeUpload (file,id) {let fd = new FormData () fd.append ('key', file, fileName) axios.post (url, fd. {data: {id:id}, headers: {'Content-Type':' multipart/form-data'}}) return false / / false just doesn't upload automatically. Later, I tried and found that it was all the same, and it wouldn't upload automatically.

The mistake reported this time is axios Missing boundary in multipart/form-data, there is no boundary, it is a headache and speechless.

Later, it was found that Content-Type is automatically identified and then added boundaries, and some people say that it is not possible to define Content-Type as undefined, but it is just automatic recognition of Content-Type.

Later, it was found that the original pass formdata and data cannot be passed together, and if you want to pass formdata, you can't have data, so change to

BeforeUpload (file,id) {let fd = new FormData () fd.append ('file', file) fd.append (' id',id) axios.post (url, fd, {}) return false / / false is not automatically uploaded. I later tried to find that they are all the same, and they will not upload automatically.

That's it.

Here is my code

Drag the file here Or click upload, please note that you can only upload the video file el-button type= "primary" @ click= "newSubmitForm ()" class= "yes-btn" > confirm reset beforeUpload (file) {console.log (file) let fd in .mp4 .flv .mov format. = new FormData () fd.append ('file' File) fd.append ('groupId', this.groupId) / / console.log (fd) newVideo (fd). Then (res = > {console.log (res)}) return true}, newSubmitForm () {this.$refs.newupload.submit ()}, export function newVideo (data) {return axios ({method:' post') Url: 'http://localhost:8086/Platform1-back-end/public/admin/VideoBase/newVideo', timeout: 20000, data: data})}

I put the axios in one file, which is separated from the vue file. In fact, they are all about the same.

In addition, if you add anything to the action, you will have a 404 error, but it will not affect the final effect. If you mind, you can see if there is any way to remove it.

The scheme is divided into three parts and transmitted many times.

Plan 2 does not try if it is successful, but it is meaningless and inconvenient.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.