vue中el-upload上传+Axios

vue页面:

<el-upload
            class="upload-demo"
            drag
            action=""
            :on-remove="handleRemove"
            :show-file-list="true"
            accept=".xlsx,.xls,csv,.txt"
            ref="uploadFile"
            :file-list="fileList"
            :on-change="changeFile"
            :http-request="httpRequest"  :imit="1" >
</el-upload>

js部分:

function changeFile1(file, fileList) {

if (fileList.length > 1) {

fileList.splice(0, 1);

}

this.fileList1 = fileList;

}

function uploadExcel(e:any){

    let file = e.target.files[0];
    let param = new FormData(); //创建form对象
    param.append('file',file);//通过append向form对象添加数据
    let Person = Context.GetPerson().ID;
    let HospID = fmModel.HospID;
    param.append('person',Person+"");
    param.append('GroupID',fmModel.GroupID);
    param.append('GroupName',fmModel.GName);
    param.append('hospID',fmModel.HospID);
  /*  console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去*/
    let config = {
        headers:{'Content-Type':'multipart/form-data'},//这里是重点,需要和后台沟通好请求头,Content-Type不一定是这个值
        timeout:{timeout: 300000},
    }; //添加请求头 //timeout 5分钟

    Axios.post("/excelExportController/uploadFile",param,config).then((res: any) => {
        if(res.success && res.result.status == 1){
            //Context.Info("上传完成!");
            let arr = [];
            arr = res.result.data
            dict.retText = arr.retText
            dict.excelList =arr.failureInfo;
            fmModel.dialogVisible4 = true;
            LoadPersonList(fmModel.GroupID,null);
        }else {
            Context.Warning(res.error);
            return false;
        }
    }).catch((e:any) => {
        Context.Warning("连接超时!请稍候重试");
        LoadPersonList(fmModel.GroupID,null);
    });

}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤来实现: 1. 安装 `axios`, `vue` 和 `element-ui`。 ```bash npm install axios vue element-ui --save ``` 2. 在 `main.js` 文件引入和使用 `element-ui`。 ```javascript import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 3. 在需要上传文件的组件,使用 `el-upload` 组件。 ```html <template> <el-upload class="upload-demo" action="/api/upload" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :headers="{ Authorization: 'Bearer ' + token }" multiple> <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div> </el-upload> </template> <script> export default { data() { return { token: 'your-token' } }, methods: { beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' const isLt500K = file.size / 1024 < 500 if (!isJPG) { this.$message.error('上传头像图片只能是 JPG/PNG 格式!') } if (!isLt500K) { this.$message.error('上传头像图片大小不能超过 500KB!') } return isJPG && isLt500K }, onSuccess(response, file, fileList) { this.$message.success('上传成功!') }, onError(error, file, fileList) { this.$message.error('上传失败!') } } } </script> ``` 4. 在 `beforeUpload` 方法,可以对文件进行验证和处理。例如,只允许上传 jpg/png 格式的图片,并且大小不能超过 500KB。 5. 在 `onSuccess` 和 `onError` 方法,可以处理上传成功和失败的情况。 6. 在 `headers` 设置请求头,例如在此处设置了 `Authorization` 头部,用于传递 Token 信息。 7. 在 `action` 设置上传的接口地址。 8. 在服务端接口,可以使用 `multer` 模块来处理上传的文件。例如: ```javascript const express = require('express') const multer = require('multer') const app = express() const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { cb(null, file.originalname) } }) const upload = multer({ storage: storage }) app.post('/api/upload', upload.single('file'), (req, res) => { res.send({ success: true }) }) app.listen(3000, () => console.log('Server started on port 3000')) ``` 在此处,通过 `multer` 模块设置了上传文件的存放路径和文件名,并在路由使用 `upload.single('file')` 方法来处理上传的文件。最后返回上传成功的信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值