Skip to content

Commit 9731f8e

Browse files
wuyang910217wuyang910217
committed
uploade img
1 parent ab58be4 commit 9731f8e

File tree

3 files changed

+89
-114
lines changed

3 files changed

+89
-114
lines changed

‎maodou/singlePages/client/components/admin/singlePagesConf/config/content.js

+2-13
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,11 @@ import wangEditor from 'wangeditor';
33
import { $ } from 'meteor/jquery';
44

55
export default class Content extends Component {
6-
7-
componentDidMount() {
8-
this.editor = new wangEditor('editor');
9-
this.editor.config.uploadImgUrl = '/upload';
10-
this.editor.create();
11-
this.editor.$txt.html(this.props.content);
12-
}
13-
14-
componentDidUpdate() {
15-
this.editor.$txt.html(this.props.content);
16-
}
17-
186
render () {
197
return (
208
<div className="col-sm-12 col-md-8">
21-
<div className='container editor' id='editor' style={style} contentEditable="true"></div>
9+
<div className='container editor' id='editor' style={style} contentEditable="true">
10+
</div>
2211
</div>
2312
);
2413
}

‎maodou/singlePages/client/containers/admin/singlePagesConf/config/content.js

+86-101
Original file line numberDiff line numberDiff line change
@@ -5,114 +5,99 @@ import 'client/lib/plupload/js/plupload.dev.js';
55
import 'qiniu-js/dist/qiniu.min';
66
import _ from 'lodash';
77
import { $ } from 'meteor/jquery';
8+
import wangEditor from 'wangeditor';
89
import Content from '../../../../components/admin/singlePagesConf/config/content';
910

1011
const lifeCycle = {
1112
componentDidMount() {
12-
// // 初始化七牛上传
13-
// uploadInit() {
14-
// // this 即 editor 对象
15-
// var editor = this;
16-
// // 触发选择文件的按钮的id
17-
// var btnId = editor.customUploadBtnId;
18-
// // 触发选择文件的按钮的父容器的id
19-
// var containerId = editor.customUploadContainerId;
20-
// Meteor.call('files.token', function(err, token, btnId, containerId) {
21-
// if (err) {
22-
// alert('初始化图片上传组件失败');
23-
// } else {
24-
// // 创建上传对象
25-
// var uploader = Qiniu.uploader({
26-
// runtimes: 'html5,flash,html4', //上传模式,依次退化
27-
// browse_button: btnId, //上传选择的点选按钮，**必需**
28-
// // uptoken_url: '/uptoken',
29-
// //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
30-
// uptoken : token,
31-
// //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
32-
// // unique_names: true,
33-
// // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
34-
// // save_key: true,
35-
// // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
36-
// domain: qiniuDomain,
37-
// //bucket 域名，下载资源时用到，**必需**
38-
// container: containerId, //上传区域DOM ID，默认是browser_button的父元素，
39-
// max_file_size: '100mb', //最大文件体积限制
40-
// flash_swf_url: 'Moxie.swf', //引入flash,相对路径
41-
// filters: {
42-
// mime_types: [
43-
// //只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
44-
// { title: "图片文件", extensions: "jpg,gif,png,bmp" }
45-
// ]
46-
// },
47-
// max_retries: 3, //上传失败最大重试次数
48-
// dragdrop: true, //开启可拖曳上传
49-
// drop_element: 'editor-container', //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
50-
// chunk_size: '4mb', //分块上传时，每片的体积
51-
// auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
52-
// init: {
53-
// 'FilesAdded': function(up, files) {
54-
// plupload.each(files, function(file) {
55-
// // 文件添加进队列后,处理相关的事情
56-
// printLog('on FilesAdded');
57-
// });
58-
// },
59-
// 'BeforeUpload': function(up, file) {
60-
// // 每个文件上传前,处理相关的事情
61-
// printLog('on BeforeUpload');
62-
// },
63-
// 'UploadProgress': function(up, file) {
64-
// // 显示进度条
65-
// editor.showUploadProgress(file.percent);
66-
// },
67-
// 'FileUploaded': function(up, file, info) {
68-
// // 每个文件上传成功后,处理相关的事情
69-
// // 其中 info 是文件上传成功后，服务端返回的json，形式如
70-
// // {
71-
// // "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
72-
// // "key": "gogopher.jpg"
73-
// // }
74-
// printLog(info);
75-
// // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
76-
//
77-
// var domain = up.getOption('domain');
78-
// var res = $.parseJSON(info);
79-
// var sourceLink = domain + res.key; //获取上传成功后的文件的Url
80-
//
81-
// printLog(sourceLink);
82-
//
83-
// // 插入图片到editor
84-
// editor.command(null, 'insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
85-
// },
86-
// 'Error': function(up, err, errTip) {
87-
// //上传出错时,处理相关的事情
88-
// printLog('on Error');
89-
// },
90-
// 'UploadComplete': function() {
91-
// //队列文件处理完毕后,处理相关的事情
92-
// printLog('on UploadComplete');
93-
//
94-
// // 隐藏进度条
95-
// editor.hideUploadProgress();
96-
// }
97-
// // Key 函数如果有需要自行配置，无特殊需要请注释
98-
// // ,
99-
// // 'Key': function(up, file) {
100-
// // // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
101-
// // // 该配置必须要在 unique_names: false , save_key: false 时才生效
102-
// // var key = "";
103-
// // // do something with key here
104-
// // return key
105-
// // }
106-
// }
107-
// });
108-
// // domain 为七牛空间（bucket)对应的域名，选择某个空间后，可通过"空间设置->基本设置->域名设置"查看获取
109-
// // uploader 为一个plupload对象，继承了所有plupload的方法，参考http://plupload.com/docs
110-
// }
13+
const { qiniuDomain, content } = this.props;
11114

15+
// 初始化七牛上传
16+
function uploadInit(){
17+
// this 即 editor 对象
18+
// 触发选择文件的按钮的id
19+
const editor = this;
20+
const btnId = editor.customUploadBtnId;
21+
// 触发选择文件的按钮的父容器的id
22+
const containerId = editor.customUploadContainerId;
23+
console.log(btnId, containerId);
24+
Meteor.call('files.token', function(err, token) {
25+
if (err) {
26+
alert('初始化图片上传组件失败');
27+
} else {
28+
// 创建上传对象
29+
var uploader = Qiniu.uploader({
30+
runtimes: 'html5,flash,html4', //上传模式,依次退化
31+
browse_button: btnId, //上传选择的点选按钮，**必需**
32+
uptoken: token,
33+
domain: qiniuDomain,
34+
container: containerId, //上传区域DOM ID，默认是browser_button的父元素，
35+
max_file_size: '100mb', //最大文件体积限制
36+
flash_swf_url: 'Moxie.swf', //引入flash,相对路径
37+
filters: {
38+
mime_types: [
39+
//只允许上传图片文件 （注意，extensions中，逗号后面不要加空格）
40+
{ title: "图片文件", extensions: "jpg,gif,png,bmp" }
41+
]
42+
},
43+
max_retries: 3, //上传失败最大重试次数
44+
dragdrop: true, //开启可拖曳上传
45+
drop_element: containerId, //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
46+
chunk_size: '4mb', //分块上传时，每片的体积
47+
auto_start: true, //选择文件后自动上传，若关闭需要自己绑定事件触发上传
48+
init: {
49+
'FilesAdded': function(up, files) {
50+
plupload.each(files, function(file) {
51+
// 文件添加进队列后,处理相关的事情
52+
});
53+
},
54+
'BeforeUpload': function(up, file) {
55+
// 每个文件上传前,处理相关的事情
56+
console.log('ddddd');
57+
},
58+
'UploadProgress': function(up, file) {
59+
// 显示进度条
60+
editor.showUploadProgress(file.percent);
61+
},
62+
'FileUploaded': function(up, file, info) {
63+
// 每个文件上传成功后,处理相关的事情
64+
// 其中 info 是文件上传成功后，服务端返回的json，形式如
65+
// {
66+
// "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
67+
// "key": "gogopher.jpg"
68+
// }
69+
// 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
70+
71+
var domain = up.getOption('domain');
72+
var res = $.parseJSON(info);
73+
var sourceLink = domain + res.key; //获取上传成功后的文件的Url
74+
75+
// 插入图片到editor
76+
editor.command(null, 'insertHtml', '<img src="' + sourceLink + '" style="max-width:100%;"/>')
77+
},
78+
'Error': function(up, err, errTip) {
79+
//上传出错时,处理相关的事情
80+
},
81+
'UploadComplete': function() {
82+
//队列文件处理完毕后,处理相关的事情
83+
84+
// 隐藏进度条
85+
editor.hideUploadProgress();
86+
}
87+
}
88+
});
89+
}
90+
});
91+
}
92+
this.editor = new wangEditor('editor');
93+
this.editor.config.customUpload = true;
94+
this.editor.config.customUploadInit = uploadInit;
95+
this.editor.create();
96+
this.editor.$txt.html(content);
11297
},
11398
componentDidUpdate() {
114-
// $('.editor').summernote('reset');
115-
// $('.edsitor').summernote('focus');
99+
const { content } = this.props;
100+
this.editor.$txt.html(content);
116101
},
117102
componentWillUnmount() {
118103
const { dispatch, selectSection } = this.props;

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"sortablejs": "^1.5.0-rc1",
3333
"sweetalert2": "^5.0.7",
3434
"toastr": "^2.1.2",
35+
"wangeditor": "^2.1.22",
3536
"wechat": "^2.0.3"
3637
},
3738
"main": "server/main.js",

0 commit comments

Comments
 (0)