前端使用axios上传文件

不用脚手架，引入vue，上传文件实现代码？
要在不使用脚手架的情况下，引入 Vue 并实现上传文件的功能，可以按照以下步骤进行：

1. 在 HTML 文件中引入 Vue 和 Axios 库：

<scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

1. 在 HTML 文件中定义 Vue 实例，并编写上传文件相关的代码：

<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"></div><script>newVue({el:'#app',methods:{handleUpload(){const formData =newFormData();const file =this.$refs.fileInput.files[0];
      formData.append('file', file);
      axios.post('/upload', formData).then(response=>{
          console.log('上传成功');}).catch(error=>{
          console.error('上传失败：', error);});}}});</script>

在上述示例中，我们首先在 HTML 文件中定义了一个包含一个文件上传 input 元素的 Vue 实例，在其中编写了一个

handleUpload

方法用于处理上传文件事件。

当用户选择文件后，我们通过

FormData

对象创建了一个新的表单数据对象，并将选择的文件添加到其中。然后，使用

axios.post

方法向服务器发送一个 POST 请求，请求的 URL 是

/upload

，此处需要根据实际情况进行修改。

当上传成功时，

.then

方法会被执行，并在控制台打印 ‘上传成功’；当上传失败时，

.catch

方法会被执行，并在控制台打印错误信息。

需要注意的是，在以上例子中，我们使用

ref

属性获取了 file input 元素的引用，并通过

this.$refs.fileInput.files[0]

获取了用户选择的文件。

多个不同文件呢？
可以修改

handleUpload

方法，用一个数组来保存用户选择的多个文件，并将每个文件都添加到 FormData 对象中，然后一次性向服务器发送所有文件。以下是一个示例：

<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multiple></div><script>newVue({el:'#app',methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;for(let i =0; i < files.length; i++){
        formData.append('files[]', files[i]);}
      axios.post('/upload', formData).then(response=>{
          console.log('上传成功');}).catch(error=>{
          console.error('上传失败：', error);});}}});</script>

在上述示例中，我们首先为 file input 元素设置了

multiple

属性，使得用户可以选择多个文件。然后，在

handleUpload

方法中，我们定义了一个空 FormData 对象和一个用于保存文件的空数组。

通过遍历选择的文件列表，并依次将每个文件添加到 FormData 对象中，并指定表单参数名为 ‘files[]’。这里需要注意的是，表单参数名需要以数组形式传递，即多个文件都会被作为同一个参数名的数组元素进行传递。

最后，我们使用

axios.post

方法向服务器发送一个 POST 请求，请求的 URL 是

/upload

，并把包含所有文件的 FormData 对象作为参数进行提交。

我还想把其中的图片预览
要预览上传的图片，可以在用户选择文件时，将图片的 Base64 编码存储到 Vue 实例中，并使用

URL.createObjectURL

生成一个预览链接保存在另一个数组中，最后在页面上渲染这些预览链接。以下是一个示例：

<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multiple><divv-for="(url, index) in previewUrls":key="index"><img:src="url"width="200"></div></div><script>newVue({el:'#app',data(){return{files:[],previewUrls:[]};},methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;for(let i =0; i < files.length; i++){
        formData.append('files[]', files[i]);if(/^image\//.test(files[i].type)){const reader =newFileReader();
          reader.readAsDataURL(files[i]);
          reader.onload=()=>{this.previewUrls.push(reader.result);};}}
      axios.post('/upload', formData).then(response=>{
          console.log('上传成功');}).catch(error=>{
          console.error('上传失败：', error);});}}});</script>

在上述示例中，我们首先定义了一个名称为

previewUrls

的数组，用于保存所有文件的预览链接。当用户选择文件时，我们遍历每个文件，并把它们添加到 FormData 对象中。如果当前文件是一张图片，我们使用

FileReader

对象读取并解析它的 Base64 编码，并把解析结果添加到

previewUrls

数组中。

需要注意的是，在使用 FileReader 对象时，必须在

readAsDataURL

方法之后，通过

onload

回调函数处理读取完成后返回的内容。

最后，当文件列表和预览列表都准备好了，我们可以使用 Vue 的

v-for

指令，在页面上渲染所有的预览链接，并以相应文件的index作为其key值进行区分展示，图片预览相关内容在 v-for 循环内展示出来以实现动态渲染。

设置图片不变形，超出部分隐藏
要设置图片不变形、超出部分隐藏，可以使用 CSS 的

object-fit

和

object-position

属性。

object-fit

属性用于指定当图片尺寸与容器尺寸不同时如何调整图片大小，而

object-position

属性则用于指定图片在容器中显示的位置。

以下是一个示例：

<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multiple><divv-for="(url, index) in previewUrls":key="index"class="preview-container"><img:src="url"class="preview-image"></div></div><style>.preview-container{width: 200px;height: 200px;overflow: hidden;}.preview-image{width: 100%;height: 100%;object-fit: cover;object-position: center center;}</style><script>newVue({el:'#app',data(){return{files:[],previewUrls:[]};},methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;for(let i =0; i < files.length; i++){
        formData.append('files[]', files[i]);if(/^image\//.test(files[i].type)){const reader =newFileReader();
          reader.readAsDataURL(files[i]);
          reader.onload=()=>{this.previewUrls.push(reader.result);};}}
      axios.post('/upload', formData).then(response=>{
          console.log('上传成功');}).catch(error=>{
          console.error('上传失败：', error);});}}});</script>

在上述示例中，我们为每个预览容器设置了一个宽度和高度，并通过

overflow: hidden

属性隐藏超出容器范围的部分。而为了让图片填满容器并保持比例不变，我们为图片设置了

width: 100%

和

height: 100%

属性，并使用

object-fit: cover

属性指定将图片等比例缩放以完全覆盖容器。

同时，为了让图片可见区域居中显示，我们还可以使用

object-position: center center

属性来指定其水平和垂直方向上的位置。

上传的同时带上参数，怎么实现？
要在文件上传时同时带上参数，可以使用 FormData 对象的

append()

方法向表单中添加额外的数据。

以下是一个示例：

<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multiple></div><script>newVue({el:'#app',methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;// 向 FormData 中添加 param1 和 param2 参数
      formData.append('param1','value1');
      formData.append('param2','value2');for(let i =0; i < files.length; i++){
        formData.append('files[]', files[i]);}
      axios.post('/upload', formData).then(response=>{
          console.log('上传成功');}).catch(error=>{
          console.error('上传失败：', error);});}}});</script>

在上述示例中，我们使用

formData.append()

将

param1

和

param2

参数添加到表单中，并设置它们的值。在上传文件时，我们把包含所有文件和额外参数的 FormData 对象作为 POST 请求的数据，然后将其提交到服务器上。
要在上传文件时设置允许的文件格式，你可以通过在 input 标签中添加

accept

属性来限制用户输入的文件类型。这个属性的值可以是逗号分隔的 MIME 类型或者文件后缀名，多个类型之间用“|”符号隔开。

以下是一个示例：

<divid="app"><inputtype="file"@change="handleUpload"ref="fileInput"multipleaccept=".png,.jpg,.jpeg"></div><script>newVue({el:'#app',methods:{handleUpload(){const formData =newFormData();const files =this.$refs.fileInput.files;for(let i =0; i < files.length; i++){
        formData.append('files[]', files[i]);}
      axios.post('/upload', formData).then(response=>{
          console.log('上传成功');}).catch(error=>{
          console.error('上传失败：', error);});}}});</script>

在上述示例中，我们为

<input>

元素添加了

accept

属性，并将其值设为 “.png,.jpg,.jpeg”，以限制用户只能上传这三种类型的图片文件。如果用户选择了不符合规定的文件，则在上传时会出现错误提示。