Upload, use of Avatar

Handwriting input Methods

1. Write the uploaded input The button

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

type type , It represents an upload file input
accep Type of upload , It represents pictures
@change When selected Trigger after file

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 });
 
        } 
      });
 
    },

3. 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;
}

vant Of upoader Component's Use

1. 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

• Handwriting input You need to use a FormData Object to convert the format , and vant Of file It's already converted
• 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
• After the transmission , The background will return data , Among them data.path Is the modified avatar URL link
• Some projects are not processed in the background , We need to send this avatar to the website , 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"   // Picture upload address 
   // 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 Network 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