vue method ajax上传文件,vue使用formData进行文件上传

本文为博主原创,未经允许不得转载

1.vue页面

placeholder="请选择客户">

v-for="customerInfo in customerArray"

:key="customerInfo.id"

:label="customerInfo.name"

:value="customerInfo.id">

@change="onPublicChange" :before-upload="beforeUpload">

浏览

注:公钥:crt|pem|cer

@change="onPrivateChange" :before-upload="beforeUpload ">

浏览

注:私钥:key

2.上传文件时的校验

onPublicChange({fileList}) {

try {

var file = fileList[fileList.length - 1];

if (file && !/.(crt|pem|cer)$/.test(file.name)){

UxMessage.warning('请上传正确格式的公钥');

return;

}

this.publicFileList = fileList.slice(fi

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue文件上传,你可以使用一些现成的插件来简化开发过程。以下是一个常用的方法: 1. 首先,你可以使用`vue-filepond`插件来处理文件上传。安装该插件: ``` npm install vue-filepond filepond ``` 2. 在你的Vue组件中,引入并注册`vue-filepond`插件: ```javascript import VueFilePond from 'vue-filepond'; import 'filepond/dist/filepond.min.css'; export default { components: { VueFilePond, }, }; ``` 3. 在模板中使用`vue-filepond`: ```html <template> <div> <vue-file-pond ref="filePond" :server="uploadUrl" name="file" allow-multiple @processfile="handleFileUpload" ></vue-file-pond> </div> </template> ``` 4. 在Vue组件的`methods`中添加处理文件上传的方法: ```javascript methods: { handleFileUpload(file) { // 在这里处理文件上传 // 可以通过ajax或fetch将文件发送到服务器 const formData = new FormData(); formData.append('file', file); // 发送文件到服务器的示例代码: fetch('/upload', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => { // 处理上传成功的响应 console.log(data); }) .catch(error => { // 处理上传失败的情况 console.error(error); }); }, }, ``` 5. 在Vue组件的`data`中定义上传文件的URL: ```javascript data() { return { uploadUrl: '/upload', // 替换为你的上传URL }; }, ``` 6. 最后,在服务器端处理文件上传的请求。使用你喜欢的后端框架(如Node.js的Express)来接收请求并保存文件。 以上是一个简单的示例,帮助你在Vue中实现大文件上传。你可以根据实际需求进行进一步的定制和优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值