フロントエンドファイルのアップロード（2種類）
（1）要素UIコンポーネント
<el-upload
class="avatar-uploader"
action="/api/image/upload"
multiple
:show-file-list="true"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
注：アクションセクションでは、/ apiはクロスドメインの状況を解決するためのプロキシであり、次の表現を使用することもできます
//html 部分
<el-upload
class="avatar-uploader"
:http-request="fileChange"
multiple
:show-file-list="true"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload">
<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
//js
fileChange(files) {
console.log(files.file)
let form = new FormData();
form.append('file', files.file);
//该方法为axios封装方法
imageUpload(form).then(res => {
})
}
//axios封装方法详细部分
import request from '../utills/axios.js'
export function imageUpload(file) {
return request({
url: '/image/upload',
headers: {
'Content-Type': 'multipart/form-data'},
method: 'post',
data:file
})
}
（2）ネイティブ
//html 部分
<input type="file" multiple="multiple" @change="fileChange" placeholder="上传文件">
//js
fileChange() {
let fileList = event.target.files;
let file = fileList[0];
let form = new FormData();
form.append('file',file);
//你的post接口，formData方式发送
imageUpload(form).then(res => {
})
}
バックエンドファイルの構成
app.jsファイルに追加します
const koaBody = require('koa-body');
app.use(koaBody({
multipart: true,
formidable: {
//上传文件存储目录
uploadDir: path.join(__dirname, `/public/uploads/`),
//允许保留后缀名
keepExtensions: true,
multipart: true,
}
})
)
ルーティングファイルセクション
router.post('/upload', async (ctx, next) => {
var str=ctx.request.files.file.path
var pathArr=str.split("\\uploads\\")
var basicUrl="http://localhost:3001/" //为基础路径
console.log(pathArr)
ctx.body = {
// filename: ctx.request.files.file,
path:basicUrl+'uploads/'+pathArr[1]
}
})
インターネットで情報を検索すると、処理に使用される画像ファイルのほとんどがコアマルターです。
これも設定しようとしましたが、常に機能しません。まだピット内にあります。具体的な設定は次のとおり
です。新しいものを作成します。 utilsディレクトリにupload.jsをファイルします。
const multer = require('koa-multer')
//配置
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'public/uploads'); //配置图片上传的目录
},
filename: function (ctx,file,cb) {
console.log('修改文件名')
const filenameArr = file.originalname.split('.');
cb(null,Date.now() + '.' + filenameArr[filenameArr.length-1]);
}
})
console.log(storage)
//加载配置
var upload = multer({
storage})
module.exports = upload
ルーティングで使用
const koaRouter = require('koa-router');
const upload = require('../utils/upload')
router.post('/upload', upload.single('file'), async (ctx, next) => {
ctx.body = {
filename: ctx.request.files.file,
}
})
app.jsファイルに追加します
const koaBody = require('koa-body');
app.use(koaBody({
multipart: true,
})
)
実行後、アップロードは成功し、戻り値はありますが、ファイルはローカルディレクトリに保存されず、upload.jsパスは正しくインポートされますが、変更されたファイルの名前は印刷後に印刷できません。ようこそ友達それを知っている人。