vue3表单上传图片

在Vue3中，处理文件上传通常会使用`vue-file-upload`这样的第三方库来简化操作。以下是一个简单的步骤和代码示例：

1. 安装依赖：
首先，你需要通过npm或yarn安装`vue-file-input`库，命令如下：

   npm install vue-file-input axios // 如果还需要发送HTTP请求
   或者
   yarn add vue-file-input axios

2. 引入并配置组件：
在你的`.vue`文件中，引入`VueFileInput`组件，并在需要的地方使用它：

   <template>
     <div>
       <input type="file" ref="uploadFile" />
       <button @click="submitUpload">上传</button>
       <span v-if="uploading">{{ uploadingMessage }}</span>
     </div>
   </template>

   <script>
   import VueFileInput from 'vue-file-input';
   export default {
     components: {
       VueFileInput,
     },
     data() {
       return {
         uploading: false,
         uploadingMessage: '上传中...',
         file: null,
       };
     },
     methods: {
       submitUpload() {
         this.uploading = true;
         this.$refs.uploadFile.submit({
           onProgress(e) {
             console.log('进度:', e.percentage);
           },
           onSuccess(file) {
             this.file = file; // 存储上传后的文件对象
             // 这里可以发送HTTP请求将图片上传到服务器
             this.uploadImageToServer();
           },
           onError(err) {
             console.error('上传错误:', err);
             this.uploading = false;
           },
         });
       },
       uploadImageToServer() {
         axios.post('/api/upload', { file: this.file }, { headers: {'Content-Type': 'multipart/form-data'} })
           .then(response => {
             this.uploading = false;
             console.log('上传成功，响应:', response.data);
           })
           .catch(error => {
             console.error('上传失败:', error);
           });
       },
     },
   };
   </script>

3. 表单验证和提交：
如果你需要添加前端验证，可以在提交之前检查文件大小、类型等。然后在后台成功响应后做进一步处理。