Authored by yyq

image upload

... ... @@ -44,6 +44,7 @@ app.use(convert(body({
formLimit: '10mb',
textLimit: '10mb',
formidable: {
keepExtensions: true,
maxFieldsSize: 10 * 1024 * 1024
}
})));
... ...
'use strict';
const _ = require('lodash');
const Router = require('koa-router');
const rp = require('request-promise');
const multiparty = require('koa2-multiparty');
const fs = require('fs');
const r = new Router();
const bucket = 'goodsimg';
const _getUploadImgAbsoluteUrl = (url, bucket) => {
if (!url) {
return null;
}
let urlArr = url.split('/'),
stag = urlArr[urlArr.length - 1].substr(0, 2),
domain = `static.yhbimg.com/${bucket}`;
url = domain + url;
if (stag === '01') {
return `//img11.${url}`;
} else if (stag === '03') {
return `//flv01.${url}`;
} else {
return `//img12.${url}`;
}
};
const upload = {
async image(ctx) {
let files = _.get(ctx, 'request.body._files.file');
let errTip;
if (!_.isArray(files)) {
files = [files];
}
const renderFiles = [];
files.forEach(file => {
let types = file.type.split('/');
if (!types || types[0] !== 'image') {
errTip = '上传文件格式不正确!';
}
if (file.size > 10 * 1024 * 1024) {
errTip = '上传文件尺寸太大!';
}
renderFiles.push(fs.createReadStream(file.path));
renderFiles.push(file.name);
});
await rp({
method: 'post',
url: 'http://upload.static.yohobuy.com',
formData: {
fileData: renderFiles,
project: bucket
},
json: true
}).then(function(result) {
if (result && result.code === 200) {
result.data = result.data || {};
result.data.images = _.map(_.get(result, 'data.imagesList'), (it) => {
return _getUploadImgAbsoluteUrl(it, bucket);
});
}
ctx.response.body = result;
});
}
};
r.post('/image', upload.image);
module.exports = r;
... ...
... ... @@ -31,6 +31,7 @@ const file = require('./actions/file');
const riskManagement = require('./actions/risk_management');
const logs = require('./actions/logs');
const spa = require('./actions/spa');
const upload = require('./actions/upload');
module.exports = function(app) {
... ... @@ -80,6 +81,7 @@ module.exports = function(app) {
// base.use('', index.routes(), index.allowedMethods());
base.use('/risk_management', riskManagement.routes(), riskManagement.allowedMethods());
base.use('/logs', logs.routes(), logs.allowedMethods());
base.use('/upload', upload.routes(), upload.allowedMethods());
base.use('', spa.routes(), spa.allowedMethods());
app.use(base.routes(), base.allowedMethods());
... ...
... ... @@ -127,20 +127,34 @@ class OptionModal extends React.Component {
this.renderData.misort = select[1];
this.renderData.sort_id = select[2];
}
handleImageChange() {
// this.renderData.goods_img = select[2];
handleImageChange(info) {
const status = info.file.status;
if (status === 'uploading') {
this.setState({ loading: true });
return;
} else if (status === 'done') {
const result = info.file.response;
let state = { loading: false };
if (result.code === 200) {
this.renderData.goods_img = result.data.images[0];
}
this.setState(state);
}
}
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isImage = file.type.indexOf('image') > -1;
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
message.error('You can only upload JPG file!');
if (!isImage) {
message.error('请上传图片!');
} else if (!isLt2M) {
message.error('Image must smaller than 2MB!');
message.error('图片大小需小于 2MB!');
}
return isJPG && isLt2M;
return isImage && isLt2M;
}
loadSortData(selectedOptions) {
const targetOption = selectedOptions[selectedOptions.length - 1];
... ... @@ -218,11 +232,11 @@ class OptionModal extends React.Component {
listType="picture-card"
className="avatar-uploader"
showUploadList={false}
action="//jsonplaceholder.typicode.com/posts/"
action="/upload/image"
name="file"
beforeUpload={this.beforeUpload}
onChange={this.handleImageChange}
style={{ width: 600 }}>
{imageUrl ? <img src={imageUrl} alt="" /> : this.uploadButton(this.state.loading)}
onChange={this.handleImageChange}>
{record.goods_img ? <img src={record.goods_img} style={{maxWidth: 200}} /> : this.uploadButton(this.state.loading)}
</Upload>
</div>
<div style={{ paddingBottom: 10 }}>
... ... @@ -345,7 +359,7 @@ class HotKeywords extends React.Component {
const rowKey = record => {
record.callbackFn = this.showOptionModal.bind(this);
return record.id
return record.id;
}
return (
... ...
... ... @@ -11,7 +11,6 @@ export default class extends Service {
return this.post('/keywords/expand/del', {ids});
}
saveHotKeywords(info) {
console.log(info);
let params = {
keywords: info.keyword,
msort: info.msort,
... ...