单文件上传
前端
try {
let formData = new FormData();
formData.append('file', this.file);
formData.append('filename', this.file.name);
formData.append('id', 4);
data = await instance.post('/sbcl/upload_single', formData);
if (+data.code === 0) {
this.fileUrl = data.servicePath
this.$message.success('文件上传成功')
return;
}
throw data.codeText;
} catch (err) {
this.$message.error(data.codeText);
} finally {
this.isRun = false
this.file = null
}
node后台
基于multiparty插件实现文件上传处理 & form-data解析
const db = require('../../db/index')
const multiparty = require('multiparty')
// 基于multiparty插件实现文件上传处理 & form-data解析
const uploadDir = `${__dirname}/upload`;
const PORT = 5000,
HOST = 'http://127.0.0.1',
HOSTNAME = `${HOST}:${PORT}`;
const multiparty_upload = function multiparty_upload (req, auto) {
typeof auto !== "boolean" ? auto = false : null;
let config = {
maxFieldsSize: 200 * 1024 * 1024,
};
console.log(__dirname);
if (auto) config.uploadDir = uploadDir;
return new Promise(async (resolve, reject) => {
// 设置文件暂存地址
new multiparty.Form(config)
.parse(req, (err, fields, files) => {
if (err) {
reject(err);
return;
}
resolve({
fields,
files
});
});
});
};
//根据id更新申报材料文件信息
exports.addFile = async (req, res) => {
try {
let {
files,
fields,
} = await multiparty_upload(req, true);
const id = fields.id
let file = (files.file && files.file[0]) || {};
let url = file.path.replace(__dirname, `${HOSTNAME}/router_handler/sbcl`)
const sql = 'update sbcl_cate set fileValue=? where id=?'
db.query(sql, [url, id], (err, results) => {
if (err) return res.cc()
res.send({
code: 0,
codeText: 'upload success',
originalFilename: file.originalFilename,
servicePath:url
});
})
} catch (err) {
console.log(err);
res.send({
code: 1,
codeText: err
});
}
}
上传进度管控
<template>
<div>
<div class="container">
<section
class="upload_box"
id="upload"
>
<input
type="file"
class="upload_inp"
@change="uploadFile($event)"
>
<el-button
type="primary"
icon="el-icon-search"
size="small"
:loading="isRun"
@click="selectFile"
>选择文件</el-button>
<el-button
type="success"
icon="el-icon-upload"
size="small"
:loading="isRun"
@click="uploadServer"
>上传文件</el-button>
<el-button
icon='el-icon-tickets'
type="success"
size="small"
:loading="isRun"
@click="showHandle"
>文章预览</el-button>
<div class="upload_list">
</div>
<div class="upload_progress">
<div class="value"></div>
</div>
</section>
</div>
<div v-show="show">
<!-- pdf文件 -->
<div>
<iframe
id="iframe"
ref="printIframe"
width="950"
height="800"
:src="fileUrl"
>
</iframe>
<p>如果您无法在线浏览此 PDF 文件,则可以</p>
<p>下载 <a
:href="fileUrl"
target="_blank"
style="color: blue;"
>PDF 文件</a></p>
</div>
</div>
</div>
</template>
<script>
import instance from './index'
export default {
props: {
"_id": {
type: Number,
},
"type": {
type: String,
},
},
data () {
return {
isRun: false,
file: [],
fileUrl: '',
show: false
}
},
methods: {
showHandle () {
if (!this.fileUrl) return;
this.show = !this.show
},
selectFile () {
let upload_inp = document.querySelector('.upload_inp')
upload_inp.click()
},
uploadFile (e) {
this.file = e.target.files[0];
if (!this.file) return;
let upload_list = document.querySelector('.upload_list')
upload_list.style.display = 'block';
upload_list.innerHTML = `${this.file.name}`
},
async uploadServer () {
let upload_progress = document.querySelector('.upload_progress'),
upload_progress_value = upload_progress.querySelector('.value'),
upload_list = document.querySelector('.upload_list'),
data;
upload_list.style.display = 'none'
upload_list.innerHTML = ''
if (!this.file) return this.$message.error('请上传文件');
//上传文件中
this.isRun = true
try {
let formData = new FormData();
formData.append('file', this.file);
formData.append('filename', this.file.name);
formData.append('id', 4);
data = await instance.post('/sbcl/upload_single', formData, {
// 文件上传中的回调函数 xhr.upload.onprogress
onUploadProgress (ev) {
let {
loaded,
total
} = ev;
upload_progress.style.display = 'block';
upload_progress_value.style.width = `${loaded / total * 100}%`;
}
});
console.log(data);
if (+data.code === 0) {
upload_progress_value.style.width = `100%`;
this.fileUrl = data.servicePath
this.$message.success('文件上传成功')
return;
}
throw data.codeText;
} catch (err) {
this.$message.error(data.codeText);
} finally {
this.isRun = false
this.file = null
upload_progress.style.display = 'none';
upload_progress_value.style.width = `0%`;
}
}
}
}
</script>
<style scoped>
.upload_box {
position: relative;
box-sizing: border-box;
padding: 10px;
width: 400px;
min-height: 150px;
border: 1px dashed #ddd;
}
.upload_inp {
display: none;
}
.upload_box .upload_progress {
display: none;
}
.upload_box .upload_progress {
margin-top: 10px;
position: relative;
height: 5px;
background: #eee;
}
.upload_box .upload_progress .value {
position: absolute;
top: 0;
left: 0;
z-index: 999;
height: 100%;
width: 0%;
background: #67c23a;
transition: width 0.3s;
}
.upload_box .upload_list {
display: none;
margin-top: 10px;
}
.upload_box .upload_list li {
line-height: 25px;
font-size: 0;
}
.upload_box .upload_list li span {
display: inline-block;
margin-right: 10px;
max-width: 70%;
color: #999;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
拖拽上传
......
多文件上传
......
大文件切片上传
......