0


前端使用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”,以限制用户只能上传这三种类型的图片文件。如果用户选择了不符合规定的文件,则在上传时会出现错误提示。


本文转载自: https://blog.csdn.net/qq_34188180/article/details/130643618
版权归原作者 qx09 所有, 如有侵权,请联系我们删除。

“前端使用axios上传文件”的评论:

还没有评论