增加语音上传

js/component/administration/business/firmList.jsx

@@ -472,7 +472,7 @@ const FirmList = Form.create()(
             title: this.state.title,
             publisher: this.state.publisher,
             type: this.state.type,
-            pictureUrl: this.state.pictureUrl
+            pictureUrl: this.state.pictureUrl && this.state.pictureUrl[0]
               ? this.state.pictureUrl[0].response.data
               : undefined,
             sort: this.state.sort,

js/component/richTextEditors.jsx

@@ -4,6 +4,7 @@ import { message } from 'antd';
 import ReactQuill,{Quill} from 'react-quill';
 import ajax from 'jquery/src/ajax/xhr.js';
 import $ from 'jquery/src/ajax';
+import audioIcon from '../../image/audio.png';
 
 
 let BlockEmbed = Quill.import('blots/block/embed');
@@ -39,10 +40,14 @@ Quill.register(AppPanelEmbed);
 
 var RichTextUploadUrl, RichTextUploadSign;
 //上传图片
-function uploadImg(s) {
+function uploadImg(s,_this) {
     let myform = new FormData()
-    let file = document.getElementById("fileToUpload").files[0]
+    let file = document.getElementById(_this.props.id + "fileToUpload").files[0];
     if (!file) { return; };
+    if(file.size > 52428800){
+        message.warning('图片大小不能超过50M');
+        return
+    }
     myform.append('file', file);
     myform.append('sign', RichTextUploadSign);
     $.ajax({
@@ -55,43 +60,56 @@ function uploadImg(s) {
         success: function (data) {
             if (data.error && data.error.length) {
                 message.warning(data.error[0].message);
+                document.getElementById(_this.props.id + "fileToUpload").value = ''
             } else {
                 const cursorPosition = s.quill.getSelection().index
                 s.quill.insertEmbed(
                     cursorPosition,
-                    "image",
-                    globalConfig.avatarUploadHost + data.data
+                    'AppPanelEmbed',
+                    `<img style="width: 100%" src="${globalConfig.avatarUploadHost + data.data}"/>`
                 );
-                s.quill.setSelection(cursorPosition + 1)
+                s.quill.setSelection(cursorPosition + 1);
+                document.getElementById(_this.props.id + "fileToUpload").value = ''
             };
+        },
+        error: function(XMLHttpRequest, textStatus, errorThrown){
+            //查看错误信息
+            message("上传失败");
+            document.getElementById(_this.props.id + "fileToUpload").value = ''
         }
     })
 }
 //图片文件选择
 function fileSelect() {
-    let uploader = document.getElementById("fileToUpload");
+    let _this = this.options._this;
+    let uploader = document.getElementById(_this.props.id + "fileToUpload");
     if (!uploader.onchange) {
         uploader.onchange = () => {
-            uploadImg(this)
+            uploadImg(this,_this)
         }
     }
     uploader.click();
 }
 //音频文件选择
 function fileSelectAudio() {
-    let uploader = document.getElementById("fileToUploadAudio");
+    let _this = this.options._this;
+    let uploader = document.getElementById(_this.props.id + "fileToUploadAudio");
     if (!uploader.onchange) {
         uploader.onchange = () => {
-            uploadAudio(this)
+            uploadAudio(this,_this)
         }
     }
     uploader.click();
 }
 //音频文件上传
-function uploadAudio(s) {
+function uploadAudio(s,_this) {
     let myform = new FormData()
-    let file = document.getElementById("fileToUploadAudio").files[0]
+    let file = document.getElementById(_this.props.id + "fileToUploadAudio").files[0]
     if (!file) { return; };
+    if(file.size > 52428800){
+        message.warning('音频大小不能超过50M');
+        return
+    }
     myform.append('file', file);
     myform.append('sign', RichTextUploadSign);
     $.ajax({
@@ -104,6 +122,7 @@ function uploadAudio(s) {
         success: function (data) {
             if (data.error && data.error.length) {
                 message.warning(data.error[0].message);
+                document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
             } else {
                 const cursorPosition = s.quill.getSelection().index
                 s.quill.insertEmbed(
@@ -112,10 +131,12 @@ function uploadAudio(s) {
                     `<audio src="${globalConfig.avatarUploadHost + data.data}" controls="controls">Your browser does not support the audio element.</audio>`
                 );
                 s.quill.setSelection(cursorPosition + 1)
+                document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
             };
 
         },
         error: function(XMLHttpRequest, textStatus, errorThrown){
+            document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
             //查看错误信息
             message("上传失败");
         }
@@ -123,19 +144,24 @@ function uploadAudio(s) {
 }
 //视频文件选择
 function fileSelectVideo() {
-    let uploader = document.getElementById("fileToUploadVideo");
+    let _this = this.options._this;
+    let uploader = document.getElementById(_this.props.id + "fileToUploadVideo");
     if (!uploader.onchange) {
         uploader.onchange = () => {
-            uploadVideo(this)
+            uploadVideo(this,_this)
         }
     }
     uploader.click();
 }
 //视频文件上传
-function uploadVideo(s) {
+function uploadVideo(s,_this) {
     let myform = new FormData()
-    let file = document.getElementById("fileToUploadVideo").files[0]
+    let file = document.getElementById(_this.props.id + "fileToUploadVideo").files[0]
     if (!file) { return; };
+    if(file.size > 52428800){
+        message.warning('视频大小不能超过50M');
+        return
+    }
     myform.append('file', file);
     myform.append('sign', RichTextUploadSign);
     $.ajax({
@@ -148,22 +174,24 @@ function uploadVideo(s) {
         success: function (data) {
             if (data.error && data.error.length) {
                 message.warning(data.error[0].message);
+                document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
             } else {
                 const cursorPosition = s.quill.getSelection().index
                 s.quill.insertEmbed(
                     cursorPosition,
                     'AppPanelEmbed',
-                    `<video controls="" autoPlay="" name="media">
+                    `<video style="width:100%" controls="" autoPlay="" name="media">
                             <source src=${globalConfig.avatarUploadHost + data.data} type="video/mp4">
                     </video>`
                 );
-                s.quill.setSelection(cursorPosition + 1)
+                s.quill.setSelection(cursorPosition + 1);
+                document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
             };
 
         },
         error: function(XMLHttpRequest, textStatus, errorThrown){
+            document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
             //查看错误信息
-            message("上传失败");
         }
     })
 }
@@ -181,7 +209,7 @@ const Editors = React.createClass({
         // this.props.handleRichText(value.replace(/iframe/g, 'video'));
     },
     componentDidMount() {
-        document.getElementsByClassName('ql-audio')[0].style = 'background: url("../../image/audio.png") no-repeat;background-size: contain;'
+        document.getElementsByClassName( 'ql-audio')[this.props.id || 0].style = `background: url(${audioIcon}) no-repeat;background-size: contain;`
     },
     componentWillMount() {
         RichTextUploadUrl = this.props.uploadUrl;
@@ -210,9 +238,10 @@ const Editors = React.createClass({
                     [{ 'align': [] }],
                     ['link', 'image','video'],
                     ['clean'],
-                    ['audio']
+                    ['audio'],
                 ],
-                handlers: { 'image': fileSelect ,'video': fileSelectVideo,'audio':fileSelectAudio}
+                handlers: { 'image': fileSelect ,'video': fileSelectVideo,'audio':fileSelectAudio},
+                _this:this
             },
         };
         const formats = [
@@ -221,7 +250,7 @@ const Editors = React.createClass({
             'list', 'bullet', 'indent',
             'color', 'background',
             'align',
-            'link', 'image','video','AppPanelEmbed'
+            'link', 'image','video','AppPanelEmbed','clean'
         ];
         return (
             <div>
@@ -233,9 +262,9 @@ const Editors = React.createClass({
                     placeholder='请填写内容！'
                     onChange={this.handleRichText}
                 />
-                <input accept="image/*" type="file" name="fileToUpload" id="fileToUpload" placeholder='请填写内容！' style={{ "display": "none" }} />
-                <input accept="video/*" type="file" name="fileToUploadVideo" id="fileToUploadVideo" placeholder='请填写视频！' style={{ "display": "none" }} />
-                <input accept="audio/*" type="file" name="fileToUploadAudio" id="fileToUploadAudio" placeholder='请选择音频！' style={{ "display": "none" }} />
+                <input accept="image/*" type="file" name={this.props.id + "fileToUpload"} id={this.props.id + "fileToUpload"} placeholder='请填写内容！' style={{ "display": "none" }} />
+                <input accept="video/*" type="file" name={this.props.id + "fileToUploadVideo"} id={this.props.id + "fileToUploadVideo"} placeholder='请填写视频！' style={{ "display": "none" }} />
+                <input accept="audio/*" type="file" name={this.props.id + "fileToUploadAudio"} id={this.props.id + "fileToUploadAudio"} placeholder='请选择音频！' style={{ "display": "none" }} />
             </div>
         )
     },