In fact, it is just tears to say more. According to my normal logic, it is like this: with the Upload component, the image will be uploaded to the specified address immediately when selecting it. At most, the header will be configured, and at the worst, the size of the file will be limited by handwriting. But my requirements are as follows:When uploading, I use file stream, that is, I directly assign the file stream value to the parameter, and then the back end will return a picture ID when the output, I display the picture by stitching the address. My immediate mood was like this:

But there is no way ah, they are not going to change the back end, only the front end helpless pain to find a solution to the problem. After many attempts (losing a lot of hair), I finally found out how to deal with this problem. Here are the main characters:

Upload images using file stream

The following code reference:

<el-upload class="avatar-uploader" action="#" list-type="picture-card" :file-list="form.codeArray" :limit="1" accept="image/jpg, image/jpeg,image/png" :auto-upload="false" :on-exceed="handleExceed" :on-change="handleChange" :on-remove="handleRemove" >< I class="el-icon-plus"></ I >< div slot="tip" class="el-upload__tip"> </strong> </div> </el-upload>Copy the code

Parameters are not specified, please refer to detailshere.

将auto-uploadWhen set to false, you will notice that most of the hooks you used before will not work, except one that will trigger and allow you to retrieve fileson-changeEvents. Take a look at the official documentation:



The onchange event will have the following output when we add the image



Remember what I need? The file stream is assigned to the parameter aboverawThat’s what we need, we just have to put these things into the assignment variable.

The image address is displayed

It is relatively easy to echo, just put the array in the format of the official website

{
   title: 'aaa',
   url: 'aaa.jpg'
 }
Copy the code

The on-remove event is used to remove elements from the array.

conclusion

Overall the steps is not difficult, difficult is likely to be found in the process, the first is the auto – upload document simply that would not immediately upload, but proves that what is the purpose, and set the attribute value to false will trigger those hooks also did not say, finally is my small hooks to try, See what the differences are. (Of course you could say bloggers are poor at understanding, which I won’t deny.)