Javascript 我无法从一个到期对话框中上传图像，但我可以使用相同的功能从另一个中上传图像
我无法从一个到期对话框中上传图像，但我可以使用相同的功能从另一个中上传图像。它在第二个对话框（editDialog）中工作，但在第一个对话框（intakeDialog）中不工作。控制台中与正确的w/image上载文件（editDialog）关联的变量输出为：Javascript 我无法从一个到期对话框中上传图像，但我可以使用相同的功能从另一个中上传图像,javascript,vue.js,file-upload,Javascript,Vue.js,File Upload,我无法从一个到期对话框中上传图像，但我可以使用相同的功能从另一个中上传图像。它在第二个对话框（editDialog）中工作，但在第一个对话框（intakeDialog）中不工作。控制台中与正确的w/image上载文件（editDialog）关联的变量输出为： idf: files_uploader app.js:238600 file1: [object File] app.js:238609 num of picture1 app.js:238614 file: [object File]
idf: files_uploader
app.js:238600 file1: [object File]
app.js:238609 num of picture1
app.js:238614 file: [object File]
app.js:238597 idf: files_uploader
app.js:238600 file1: undefined
app.js:238609 num of picture1
idf: files_uploader
app.js:238600 file1: [object File]
app.js:238609 num of picture1
app.js:238614 file: [object File]
app.js:238597 idf: files_uploader
app.js:238600 file1: undefined
app.js:238609 num of picture1
<!-- Intake Dialog -->
<v-dialog
v-model="intakeDialog"
width="700"
>
<v-card>
<v-card-title
class="headline grey lighten-2 p-3"
primary-title
>
<span>{{current_sample.number}}</span>
<v-spacer></v-spacer>
<span>{{current_sample.sample_accession}}</span>
</v-card-title>
<v-container>
<v-layout wrap class="form-blocks">
<v-flex>
<p><v-flex sm3 v-for="media in current_sample.media" :key="media.id">
<v-btn @click="delete_image(media.id)">[X]</v-btn> <img :src="'https://orderinformation.s3.amazonaws.com/' + media.path" class="rotateImg" />
</v-flex> </p>
</v-flex>
<v-flex sm10>
<label class="m-l-1 m-r-1"><p style="font-weight: bold">Image Uploader </p></label>
<input type="file"
name = "file"
class="form-control-file border"
id="files_uploader"
multiple
ref="image"
accept="image/*"
placeholder="Order #"
v-on:change="fileValidation(1), previewFile()"/>
<img style="height:80px; margin:15px; visibility: hidden;"
src=""
height="80"
alt="Sample preview..."
class="PreviewImage"/>
</v-flex>
<v-flex sm2>
<label class="m-l-1 m-r-1"><p style="font-weight: bold; color:red">Make Image Default?</p></label>
<b-form-checkbox
id="default_check"
v-model="current_sample.status"
name="default_check"
value="default"
unchecked-value="not_default"
>
</b-form-checkbox>
</v-flex>
</v-layout>
</v-container>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="red"
text
@click="intakeDialog = false, current_sample={}"
>
Cancel
</v-btn>
<v-btn
color="green darken-1"
@click="upload_image()"
>
Submit
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<!-- Edit Dialog -->
<v-dialog
v-model="editDialog"
width="700"
class="editDialog"
>
<v-card>
<v-card-title
class="headline grey lighten-2 p-3"
primary-title
>
<span>{{current_sample.number}} / {{current_sample.batch_no}} / {{current_sample.sample_accession}}</span>
<v-spacer></v-spacer>
<span></span>
</v-card-title>
<v-container>
<v-layout wrap class="form-blocks">
<label class="m-l-1 m-r-1"><p style="font-weight: bold; font-size:24px !important; line-height: 32px !important">Sample Verification</p></label>
<table width="100%">
<tr valign="top" colspan="3">
<td width="33%">
<v-layout wrap class="form-blocks">
<label class="m-l-1 m-r-1">Sample Verified </label>
<b-form-checkbox
id="accepted_check"
v-model="current_sample.accepted_for_testing"
name="accepted_check"
value="Yes"
unchecked-value="No"
>
</b-form-checkbox>
</v-layout>
</td>
<td width="33%">
<v-layout wrap class="form-blocks"><label class="m-l-1 m-r-1">Accession ID fixed? </label>
<b-form-checkbox
id="accession_id_check"
v-model="current_sample.accession_id_fixed"
name="accession_id_check"
value="1"
unchecked-value="0"
>
</b-form-checkbox>
</v-layout>
</td>
<td width="33%">
<v-layout wrap class="form-blocks"><label class="m-l-1 m-r-1">Batch# Validated </label>
<b-form-checkbox
id="bash_no_check"
v-model="current_sample.batch_no"
name="bash_no_check"
value="1"
unchecked-value="0"
>
</b-form-checkbox>
</v-layout>
</td>
</tr>
<tr colspan="3">
<td>
<v-layout wrap class="form-blocks"><label class="m-l-1 m-r-1">Sample Rejected </label>
<b-form-checkbox
id="rejected_no_check"
v-model="current_sample.sample_rejected"
name="rejected_no_check"
value="Yes"
unchecked-value="No"
>
<div class="container" v-if="current_sample.sample_rejected">
<v-text-field
label="Rejection Comments"
v-model="current_sample.rejection_comment"
name="rejection_comment"
class="break">
</v-text-field>
</div>
</b-form-checkbox>
</v-layout>
</td>
</tr>
</table>
<v-flex sm10>
<div id="selector" class="flex-row">
<div class="container" id="app-container">
<table>
<tr>
<td>
<v-select
v-model="current_sample.sample_received_date_time_1"
:items="datesList"
label="Select dates"
item-text="date"
id="select_dates"
value="2019-10-01" >
</v-select>
</td>
<td>
<v-select
v-model="current_sample.sample_received_date_time_2"
:items="hourList"
label="Select hour"
item-text="hour"
id="select_hour"
value="2019-10-01"
>
</v-select>
</td>
<td>
<v-select
v-model="current_sample.sample_received_date_time_3"
:items="minuteList"
label="Select minute"
item-text="minute"
id="select_minute"
value="2019-10-01"
>
</v-select>
</td>
</tr>
</table>
</div>
</div>
<input type="file"
name = "file"
class="form-control-file border"
id="files_uploader"
multiple
ref="image"
accept="image/*"
placeholder="Order #"
v-on:change="fileValidation(1), previewFile()"/>
<v-flex>
<p>
<v-flex sm3 v-for="media in current_sample.media" :key="media.id">
<v-btn @click="delete_image(media.id)">[X] </v-btn> <img :src="'https://orderinformation.s3.amazonaws.com/' + media.path" class="rotateImg PreviewImage" />
</v-flex>
</p>
</v-flex>
</v-flex>
</v-layout>
</v-container>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="red"
text
@click="editDialog = false, current_sample={}"
>
Cancel
</v-btn>
<v-btn
color="green darken-1"
@click="updateOrderInfo(current_sample), upload_image()"
>
Submit
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<script>
methods: {
upload_image(value = 0, accession = '696668')
{
let idf = (value = 0) ? 'file_uploader' : 'files_uploader';
console.log("idf: " + idf);
this.uploading = true;
let file = document.getElementById(idf).files[0];
console.log("file1: " + file);
let accession_number = `${this.current_sample.sample_accession}`;
var order_number = `${this.current_sample.number}`;
var order_details_id = `${this.current_sample.id}`;
var checkdefault = `${this.current_sample.status}`;
/*for(i=0; i<current_sample.media.length; i++)
{
}*/
console.log("num of picture" + Object.keys(this.current_sample.media).length);
if (Object.keys(this.current_sample.media).length <= 1) {
if (file) {
// create reader
console.log("file: " + file);
let reader = new FileReader();
reader.readAsText(file);
reader.onload = function (e) {
// browser completed reading file - display it
// alert(e.target.result);
let formData = new FormData();
formData.append("order_number", order_number);
formData.append("order_details_id", order_details_id);
formData.append("file", file);
formData.append("acession_number", accession_number);
formData.append("checkdefault", checkdefault);
axios
.post("/api/order_master/uploadPicture", formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(response => {
this.upload = null;
this.imagename = null;
this.uploading = false;
file = null;
this.closeModal();
this.snackbar.text = `Sample ${this.current_sample.sample_accession} picture(s) weight has been upload!`;
this.snackbar.color = "success";
this.snackbar.show = true;
}).catch((error) => {
console.error(error);
this.snackbar.text = "A problem occurred, try again!";
this.snackbar.color = "danger";
this.snackbar.show = true;
});
}
}
}
}
,
//1671
fileValidation: function (value = 0) {
// let idf = ( value = 0 )?'file_uploader': 'files_uploader';
let fileInput = document.getElementById('files_uploader');
let filePath = fileInput.value;
let allowedExtensions = /(\.jpg|\.jpeg|\.png|\.svg|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('Please upload file having extensions .jpeg/.jpg/.png/.gif only.');
fileInput.value = '';
return false;
} else {
//Image preview
if (fileInput.files && fileInput.files[0]) {
let reader = new FileReader();
reader.onload = function (e) {
let id = (value = 0) ? 'imagePreview' : 'imagesPreview';
document.getElementById(id).innerHTML = '<img src="' + e.target.result + '"/>';
};
reader.readAsDataURL(fileInput.files[0]);
}
}
}
}
</script>
{{current_sample.number}
{{当前样本。样本加入}
[X]
图像上传器
是否将图像设为默认值
取消
提交
{{current_sample.number}/{{current_sample.batch_no}/{{current_sample.sample}
样本验证
样品验证
身份证修好了吗？
批次#已验证
样品拒收
[X]
取消
提交
方法：{
上传图片（值=0，登录号=696668）
{
让idf=（值=0）？'file_uploader'：'files_uploader'；
控制台日志（“idf:+idf”）；
this.upload=true；
让file=document.getElementById（idf.files[0]；
log（“file1:+file”）；
让登录号=`${this.current_sample.sample_accession}`；
var order_number=`${this.current_sample.number}`；
var order_details_id=`${this.current_sample.id}`；
var checkdefault=`${this.current_sample.status}`；
/*对于（i=0；i{
控制台错误（error）；
this.snackbar.text=“出现问题，请重试！”；
this.snackbar.color=“危险”；
this.snackbar.show=true；
});
}
}
}
}
,
//1671
文件验证：函数（值=0）{
//让idf=（值=0）？'file_uploader'：'files_uploader'；
让fileInput=document.getElementById（'files_uploader'）；
让filePath=fileInput.value；
让allowedExtensions=/（\.jpg\.jpeg\.png\.svg\.gif）$/i；
如果（！allowedExtensions.exec（文件路径））{
警报（'请上载扩展名仅为.jpeg/.jpg/.png/.gif的文件'）；
fileInput.value=''；
返回false；
}否则{
//图像预览
if（fileInput.files&&fileInput.files[0]）{
let reader=new FileReader（）；
reader.onload=函数（e）{
让id=（值=0）？'imagePreview'：'imagesPreview'；
document.getElementById（id）.innerHTML=''；
};
reader.readAsDataURL（fileInput.files[0]）；
}
}
}
}