Upload and modify the use of avatars

Handwriting input Methods

1 Write the uploaded input Button

<input  type='file'  accept="image/*"  @change='change'> Upload local file 

type type , Indicates that the file is uploaded input

accept Type of upload , Represents a picture

@change Trigger after the file is selected

2 Corresponding change event

  change(e) {

     //  Handwritten input You need an object to convert the local image into the corresponding format to upload 
      let formData = new FormData();

     // e.target.files Is an array of selected files 
      formData.append("file", e.target.files[0]); 

     //  take formData This object is passed to the interface that modifies the avatar 
      updateImg(formData).then(res => {

        if (res.code == 200) {
          Toast(res.msg);

    //  res.data.path The URL returned is the avatar , It also depends on the returned data 
          this.userData.avatar = res.data.path;

     //  Some projects need to send the successful image to the website , Send and modify data interface , See the background processing for details 
          updateUser({ avatar: res.data.path });

        } 
      });

    },

Corresponding input Change the style of

DOM structure

<a href="javascript:;" class="file"> Select File 
    <input type="file" name="" id="">
</a>

css structure

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}

The modified style is shown in the following figure

Click to see more specific style changes

vant Of Uploader Use of components

1 Use   Here is the basic usage

<van-uploader :after-read="afterRead" />

  2 Upload files

 methods: {

    afterRead(file) {

     // file It's the handwriting on it input in , after FromData The picture address after packaging , It can be uploaded directly to the server 

      updateImg(file).then(res => {
        if (res.code == 200) {
          Toast(res.msg);

    //  res.data.path The URL returned is the avatar , It also depends on the returned data 
          this.userData.avatar = res.data.path;

     //  Some projects need to send the successful image to the website , Send and modify data interface , It depends on whether it has been handled in the background 
          updateUser({ avatar: res.data.path });

        } 
      
    },

  },

matters needing attention ：

1 Handwriting input You need to use a FormData Object to convert the format , and vant Of file It's already converted

2 This converted format , It's an object , Directly treat the whole object as data Parameters can be passed , The specific situation depends on the project interface

3 After the transmission , The background will return data , Among them data.path Is the URL link of the modified avatar

4 Some projects are not processed in the background , We need to put this avatar website again , Pass to the interface for modifying user information , The purpose of modifying the Avatar has been achieved

elementUi Upload your avatar

<el-upload 
     :action="uploadURL"   // Address or interface for uploading pictures , Full web address required 
   // Trigger when you click the uploaded file in the file list , With a parameter , There are http Picture format for , You can preview pictures 
     :on-preview="handlePreview"   
  // Trigger... When deleting files , With a parameter , There are http Picture format for 
     :on-remove="handleRemove"
  // Set the request header file when uploading , Because some pictures need to be uploaded token, You can set it up here 
     :headers="headerObj"
  // Type of file list 
     list-type="picture"
  //  Triggered when the file is uploaded successfully , There will also be parameters , You can find pictures in the corresponding format 
     :on-success="handleSuccess"
 >

Be careful ：

In every event , Will come with a parameter , You can find pictures in two formats ,https The Internet Format and "tmp_uploads\468f50432ed8b67b89e2490dc9e7f34d.jpg" Local Format , Which format of pictures will be uploaded at that time , See the requirements of the interface document

If you want to preview the picture , The bullet box needs to be written by yourself , Can be in on-preview In the incident , Get the network format of the currently clicked picture

Because the image upload interface or website here is an independent website ,action  attribute Value , Must be a complete web address

headers Attributes are used to pass token Of , The specific format depends on the project requirements