vue3实现上传功能

效果：

 

 点击即可上传

代码：

         <a-form-item label="附件" name="logUrl" placeholder="">
            <a-upload
            v-model:file-list="filesLists"
              :customRequest="uploadFile"
              class="upload-list-inline"
            >
              <a-button>
                <upload-outlined></upload-outlined>
              </a-button>
               <template #itemRender="{ file, actions }">
      <a-space>
        <span :style="file.status === 'error' ? 'color: red' : ''" :title="file.name">{{ file.name }}</span>
        <!-- <a href="javascript:;" @click="actions.remove"><delete-outlined /></a> -->
         <a href="javascript:;" @click="preview(file,actions)"><edit-outlined /></a>
         <a href="javascript:;" @click="remove(file,actions)"><delete-outlined /></a>
        
      </a-space>
    </template>
            </a-upload>
      </a-form-item>

const uploadFile = (file) => {
 let formData = new FormData();
  formData.append("file", file.file);
  const uid=file.file.uid
     uploadAPI(formData).then((res) => {
    imgLoding.value=false
    message.success("上传成功");
    filesList.value.push({...res,uid})
  });
};

export function uploadAPI (params) {
  return request({
    method: 'post',
    url: uploadApi+'/api/app/file-address/upload-file',
    data:params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}

 

function  preview (file) {
      changeInputVal.value = {...file}
      previewVisibleName.value = true
    }

const remove=(file,actions)=>{
actions.remove()
filesList.value = filesList.value.filter(item => item.uid !== file.uid);
}