1. Toy模板网首页
  2. > Toy博客

vue前端自定按钮控制手动上传文件

7月前 作者：蓝胖子不是胖子 分类：Toy博客 阅读(27) 违法举报

这篇具有很好参考价值的文章主要介绍了vue前端自定按钮控制手动上传文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先element-ui中的上传组件是这样的
el-upload手动上传文件,Vue,前端,vue.js,javascript
数据结构:
{
action:“”//上传的连接
filelist:'‘’//选种的文件集合
}

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

点击按钮后就自动根据action的地址上传,实际上是element-ui自动发送了post请求给action连接,但是我想要通过自己手动上传文件(图片/excel)
el-upload手动上传文件,Vue,前端,vue.js,javascript
直接发送这个文件体

  upload(){
      this.request.post('/manage/uploadExcel',this.filelist).then(res=>{
     alert(res.code)
      })
    },

游览器发现无负载,并且前端已经自动发送了一次请求给action,如果把action参数取消,控制台还会报错

el-upload手动上传文件,Vue,前端,vue.js,javascript
为了实现手动上传文件,需要添加<el-Upload>的属性 http-request
el-upload手动上传文件,Vue,前端,vue.js,javascript
实现方法:因为直接只用filelist发送请求时无法携带的,所以就用自定义方法接受filelist的文件

<el-upload
            class="upload-demo"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :action="null"
            :http-request="fileupdate"
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button size="small" type="primary" >导入excel数据 <i class="el-icon-circle-plus-outline"></i></el-button>
        </el-upload>

fileupdate方法

   fileupdate(item){
   this.model=item.file
    },

此时文件就已经赋值给自定义的数组model

再次使用axios发送post请求

 upload(){
      this.request.post('/manage/uploadExcel',this.model).then(res=>{
     alert(res.code)
      })

成功
el-upload手动上传文件,Vue,前端,vue.js,javascript
第二种方法
关闭自动上传 手动按钮上传 :auto-upload=“false”

  <el-upload
            class="upload-demo"
            action=""
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            ref="upload"
            :before-remove="beforeRemove"
            :auto-upload="false"
            multiple
            :limit="3"
            :on-success="handle_success"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>

时间处理 axios提交请求

 submitUpload() {
      //this.$refs.upload.submit();
      let file = this.$refs.upload.uploadFiles.pop().raw;//这里获取上传的文件对象
      let formData = new FormData();
      formData.append("file",file);
      this.request.post("/app/uploadFiles",formData).then(res=>{
        this.$message.success(res.data)
      })},

其中如果图片是上传oss
**:on-success=“handle_success”**可以写入上传成功的逻辑

//和axios一样的回调
 handle_success(res) {
      console.log(res)
      this.$message.success('图片上传成功')
    },

自动上传中，可以使用header属性为action地址添加请求头

let headers=reactive(
    {
      Authorization: localStorage.getItem("token")
    }
);

2023.vue3 element plus 更新…因为element ui快停止维护了,所以这里记录,upload组件实现都都多个文件文件一次请求上传(element 默认的多选上传是多次请求上传的)

    <el-upload
                            :limit="4"
                            ref="upload"
                            class="upload-files"
                            action=""
                            name="files"
                            :on-exceed="handleExceed"
                            multiple
                            :auto-upload="false"
                            :file-list="fileList"
                            :on-success="uploadusccess"
                            :on-change="handleChange"
                            style="margin-top: 20px"
                        >


                            <template #trigger>
                                <el-button type="primary">选择图片<el-icon><DocumentAdd /></el-icon></el-button>
                            </template>

                            <el-button style="margin-left: 10px" class="ml-3" type="success"  @click="updateinterUpload">
                                保存到<el-icon><Upload /></el-icon>
                            </el-button>



                            <template #tip>
                                <div class="el-upload__tip">
                                  最多上传4张
                                </div>
                            </template>

                        </el-upload>

script


let fileList=ref([])
const loading = ref(false)
//加载动画



const handleExceed=(files, fileList) =>{
    ElMessage.warning(`当前限制选择 4 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
}
const handleChange = (file, files) => {
    // file是当前上传的文件，files是当前选中的所有的文件，
    fileList.value = files
    console.log("当前选择文件"+files)
}
//上传
const updateinterUpload = async () => {
    try {
        loading.value=true
        const formData = new FormData();
        formData.append('name', 'myk');

        fileList.value.forEach(item => {
            console.log(item.raw);
            formData.append('file', item.raw);
        });
//检验是否赋值
        console.log(formData.getAll('file'));

        // 发送请求，注意 headers: {'Content-Type': 'multipart/form-data'}
        const response = await request.post('/upload/imgs', formData);

        console.log(response);

        if (response.code === 200) {
            loading.value=false
            addformData.value.iimgUrl=response.data
            ElMessage.success("操作成功");
        } else {
            ElMessage.error("操作失败");
        }
    } catch (error) {
        console.error("上传失败", error);
        ElMessage.error("上传失败");
    }
};

ts版本文章来源地址https://www.toymoban.com/news/detail-857361.html

<template>
	<el-upload
		:limit="5"
		class="upload-files"
		name="file"
		:on-exceed="handleExceed"
		multiple
		:auto-upload="false"
		:file-list="fileList"
		:on-change="handleChange"
		style="margin-top: 20px"
	>
		<template #trigger>
			<el-button type="primary"
				>选择图片<el-icon><DocumentAdd /></el-icon
			></el-button>
		</template>

		<el-button style="margin-left: 10px" class="ml-3" type="success" @click="updateInterUpload">
			保存到<el-icon><Upload /></el-icon>
		</el-button>

		<template #tip>
			<div class="el-upload__tip">最多上传4张</div>
		</template>
	</el-upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, UploadFile } from 'element-plus'
import request from '@/utils/request' // 根据实际项目路径调整
const props = defineProps({
	successAction: {
		type: Function,
		required: true
	}
})
let fileList = ref<UploadFile[]>([]) // 使用 UploadFile 类型
const loading = ref(false)

const handleExceed = (files: UploadFile[], fileList: UploadFile[]) => {
	ElMessage.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
}

const handleChange = (file: UploadFile, files: UploadFile[]) => {
	fileList.value = files // 更新 fileList
	console.log('当前选择文件', files) // 修正日志输出
}
const updateInterUpload = async () => {
	try {
		loading.value = true
		const formData = new FormData()
		fileList.value.forEach(item => {
			if (item.raw) {
				// 确保 item.raw 是文件对象
				formData.append('file', item.raw) // 正确添加文件对象到 FormData
			}
		})

		// 在控制台打印 FormData 中的文件，仅用于调试
		for (let [key, value] of formData.entries()) {
			console.log(`${key}: ${value}`)
		}

		// 发送包含文件的 FormData 到服务器
		const response = await request.post('/product/upload', formData, {
			headers: { 'Content-Type': 'multipart/form-data' }
		})

		// 处理响应
		if (response.code === 0) {
			loading.value = false
			ElMessage.success('操作成功')
		} else {
			ElMessage.error('操作失败')
		}
	} catch (error) {
		console.error('上传失败', error)
		ElMessage.error('上传失败')
	}
}
</script>

到了这里，关于vue前端自定按钮控制手动上传文件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包