VUE+axios 以files上传图片并预览记录

最新推荐文章于 2021-08-04 20:56:06 发布

对不起，此账户已销号。

最新推荐文章于 2021-08-04 20:56:06 发布

阅读量632

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE记录

本文链接：https://blog.youkuaiyun.com/weixin_42858573/article/details/96003381

本文档详细介绍了如何在Vue.js项目中利用axios库上传图片文件，并实现上传前的本地预览功能。通过创建input[type=file]元素选择图片，结合Vue实例的数据绑定和事件监听，实现文件选择后的即时预览。同时，利用axios发送POST请求将图片上传到服务器。此教程适用于Vue.js初学者和进阶开发者，帮助理解文件操作和HTTP请求在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE+axios 以files上传图片并预览

最近做一个项目，后台要以file 表单形式提交图片，记录如下：
功能：实现多图预览与上传
要求：formData提交
项目工具：VUE+axios+jQuery
前端步骤：
1.选择时图片预览；
2.上传前多图预览；
3.上传；

html代码：

<!-- tab-1  当前图片预览-->
<div class="tab" v-show="tabIndex==0">

   		<!-- 当前图片预览位置 -->
        <img src alt class="previewImg" />
        
        <!-- 选择上传文件 -->
        <input type="file" ref="file" style="opacity: 0;width:100%" @change="getfile()" accept="image/*" />
        <!-- 用来展示的为上传btn -->
        <button class="btn" >选择图片</button>
        
        <button class="myok" @click="confirm()">确定</button>
</div>

<!-- tab-2 多图预览 -->
<div class="tab two" v-show="tabIndex==1">
    <div class="imgbox smpreview" v-for="(item,index) in filesImgArr" :key="index" >
        <span class="delimg" @click="delimg(index)">×</span>
        <img :src="item" alt class="smimg" />
    </div>
    <button @click=“submit”>上传</button>
</div>
<script>
export default {
	data(){
		return{
			files: '',//当前被选择的文件
            files