Explorar el Código

解决同级富文本上传图片问题

HW hace 4 años
padre
commit
43775e4206

+ 3 - 1
js/component/administration/weapp/product/add.jsx

@@ -197,7 +197,7 @@ class Add extends Component{
                 commodityContent: this.state.commodityContent || undefined,
                 id: this.props.id || undefined,
                 type: this.state.projectType,
-                amount: this.state.amount || undefined,
+                amount: !isNaN(parseInt(this.state.amount)) ? this.state.amount : undefined,
                 commodityUrl: this.state.pictureVideoUrl ? this.state.pictureVideoUrl[0].response.data : '',
                 commodityType: this.state.commodityType,
                 thumbnailUrl: this.state.pictureImgUrl[0].response.data || undefined,
@@ -418,6 +418,7 @@ class Add extends Component{
                                     label="未购买简介"
                                 >
                                     <Editors
+                                        id={0}
                                         textContent={this.state.content}
                                         uploadUrl={"/api/admin/news/uploadFile"}
                                         globalConfig={globalConfig.uploadPath}
@@ -435,6 +436,7 @@ class Add extends Component{
                                     label="已购买简介"
                                 >
                                     <Editors
+                                        id={1}
                                         textContent={this.state.commodityContent}
                                         uploadUrl={"/api/admin/news/uploadFile"}
                                         globalConfig={globalConfig.uploadPath}

+ 30 - 26
js/component/richTextEditors.jsx

@@ -40,9 +40,9 @@ 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; };
     myform.append('file', file);
     myform.append('sign', RichTextUploadSign);
@@ -56,7 +56,7 @@ function uploadImg(s) {
         success: function (data) {
             if (data.error && data.error.length) {
                 message.warning(data.error[0].message);
-                document.getElementById("fileToUpload").value = ''
+                document.getElementById(_this.props.id + "fileToUpload").value = ''
             } else {
                 const cursorPosition = s.quill.getSelection().index
                 s.quill.insertEmbed(
@@ -65,40 +65,42 @@ function uploadImg(s) {
                     `<img style="width: 100%" src="${globalConfig.avatarUploadHost + data.data}"/>`
                 );
                 s.quill.setSelection(cursorPosition + 1);
-                document.getElementById("fileToUpload").value = ''
+                document.getElementById(_this.props.id + "fileToUpload").value = ''
             };
         },
         error: function(XMLHttpRequest, textStatus, errorThrown){
             //查看错误信息
             message("上传失败");
-            document.getElementById("fileToUpload").value = ''
+            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; };
     myform.append('file', file);
     myform.append('sign', RichTextUploadSign);
@@ -112,7 +114,7 @@ function uploadAudio(s) {
         success: function (data) {
             if (data.error && data.error.length) {
                 message.warning(data.error[0].message);
-                document.getElementById("fileToUploadAudio").value = ''
+                document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
             } else {
                 const cursorPosition = s.quill.getSelection().index
                 s.quill.insertEmbed(
@@ -121,12 +123,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("fileToUploadAudio").value = ''
+                document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
             };
 
         },
         error: function(XMLHttpRequest, textStatus, errorThrown){
-            document.getElementById("fileToUploadAudio").value = ''
+            document.getElementById(_this.props.id + "fileToUploadAudio").value = ''
             //查看错误信息
             message("上传失败");
         }
@@ -134,18 +136,19 @@ 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; };
     myform.append('file', file);
     myform.append('sign', RichTextUploadSign);
@@ -159,7 +162,7 @@ function uploadVideo(s) {
         success: function (data) {
             if (data.error && data.error.length) {
                 message.warning(data.error[0].message);
-                document.getElementById("fileToUploadVideo").value = ''
+                document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
             } else {
                 const cursorPosition = s.quill.getSelection().index
                 s.quill.insertEmbed(
@@ -170,12 +173,12 @@ function uploadVideo(s) {
                     </video>`
                 );
                 s.quill.setSelection(cursorPosition + 1);
-                document.getElementById("fileToUploadVideo").value = ''
+                document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
             };
 
         },
         error: function(XMLHttpRequest, textStatus, errorThrown){
-            document.getElementById("fileToUploadVideo").value = ''
+            document.getElementById(_this.props.id + "fileToUploadVideo").value = ''
             //查看错误信息
         }
     })
@@ -194,7 +197,7 @@ const Editors = React.createClass({
         // this.props.handleRichText(value.replace(/iframe/g, 'video'));
     },
     componentDidMount() {
-        document.getElementsByClassName('ql-audio')[0].style = `background: url(${audioIcon}) 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;
@@ -225,7 +228,8 @@ const Editors = React.createClass({
                     ['clean'],
                     ['audio'],
                 ],
-                handlers: { 'image': fileSelect ,'video': fileSelectVideo,'audio':fileSelectAudio}
+                handlers: { 'image': fileSelect ,'video': fileSelectVideo,'audio':fileSelectAudio},
+                _this:this
             },
         };
         const formats = [
@@ -246,9 +250,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>
         )
     },