Use a custom Upload Upload implementation

Http-request is a function that overrides the default upload behavior and allows you to customize the upload implementation.

Using the Upload component

Since several upload interactions provided by Ele. me do not satisfy our business, I need to customize the interaction. So let’s look at what’s going on in the code.

// import and use main.js
import { Upload } from 'element-ui';
Vue.use(Upload);
Copy the code
// xxx.vue
  <template>
    <el-upload
      action="string"           // actionIt's a mandatory field. Fill it out:http-request="uploadImg"// Use a custom upload implementation:show-file-list="false"// Do not display the list of uploaded files >
    </el-upload>
  </template>
Copy the code

The wrong version is shown first

// XXX. Vue <script> methods: {uploadImg(item) {api.uploadfile ({data: {file: item.file, group: 'system' } }) .then((data) => { console.log(data) }) .catch((err) => { console.log(err, 'error'); }); }, } </script>Copy the code

UploadFile uploadFile uploadFile uploadFile uploadFile uploadFile uploadFile uploadFile uploadFile uploadFile uploadFile

The correct way to pass file is as follows

// xxx.vue <script> methods: { uploadImg(item) { let formData = new FormData() formData.append('file', item.file) formData.append('group', 'system') Api.uploadFile({ data: Then ((data) => {console.log(data)}). Catch ((err) => {console.log(err, 'error'); }); }, } </script>Copy the code

After trying a lot of methods and looking up a lot of documents, I found a magical thing. I was so ignorant that I didn’t know how to use FormData. Scared that I quickly took a small notebook to write down its use methods and functions. Yes, this is the method pass that converts the file type to binary using FormData. Click to see the use of the FormData object

About the use of FormData

The FormData object is used to compile data into key-value pairs that can be sent using XMLHttpRequest. It is mainly used to send form data, but can also be used to send keyed data independently of the form. If the form encType attribute is set to multipart/form-data, the form’s submit() method is used to send the data, so that the sent data has the same form.

Create the FormData object from scratch
var formData = new FormData();

formData.append("username"."Groucho");
formData.append("accountnum".123456); // The number 123456 is immediately converted to the string "123456"

// HTML file type INPUT, selected by the user
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like objects
var content = 'hey! '; // The body of the new file...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST"."http://foo.com/submitform.php");
request.send(formData);
Copy the code

Highlight it!! The trick is to convert file to binary.

The FormData object’s field type can be Blob, File, or String: if its field type is neither Blob nor File, it is converted to a string class.

Create a FormData object from an HTML form

Example:

var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST"."submitform.php");
request.send(new FormData(formElement));
Copy the code

You can also attach additional data to the FormData object after creating a FormData object that contains the Form’s data and before sending the request, like this:

var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST"."submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);
Copy the code

This gives you the freedom to attach fields that are not necessarily user-edited to the form data before sending the request

Upload files using the FormData object

To upload a file using FormData, add an input of file type to the form:

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit'.function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField"."This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST"."stash.php".true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>"; }}; oReq.send(oData); ev.preventDefault(); },false);
Copy the code

If the FormData object is created from a form, the request method specified in the form is applied to the method open().

For more details, please refer to my reference documentation

The use of FormData objects

New FormData() – The FormData object

Emmmm, I’m writing this article because it took a long time to solve this problem. Have wrong place, hope everybody points out in time, thank ~