123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 |
- <template>
- <el-upload
- class="avatar-uploader"
- :http-request="uploadAndSubmit"
- :show-file-list="false"
- accept="image/*"
- action=""
- drag
- style="position: relation"
- >
- <i class="el-icon-plus avatar-uploader-icon"></i>
- </el-upload>
- </template>
- <script>
- export default {
- props: {
- keyName: {
- type: String,
- default: ""
- }
- },
- methods: {
- uploadAndSubmit(item) {
- // var form = document.forms["demoForm"];
- // if (form["file"].files.length > 0) {
- // 寻找表单域中的 <input type="file" ... /> 标签
- // var file = form["file"].files[0];
- let file = item.file;
- // try sending
- let reader = new FileReader();
- let vm = this;
- let fileType = file.name.split('.')
- let type = fileType[fileType.length -1]
- reader.onloadstart = function() {
- // 这个事件在读取开始时触发
- };
- reader.onprogress = function(p) {
- // 这个事件在读取进行中定时触发
- };
- reader.onload = function() {
- // 这个事件在读取成功结束后触发
- };
- reader.onloadend = function() {
- // 这个事件在读取结束后,无论成功或者失败都会触发
- if (reader.error) {
- } else {
- // document.getElementById("bytesRead").textContent = file.size;
- // 构造 XMLHttpRequest 对象,发送文件 Binary 数据
- var xhr = new XMLHttpRequest();
- xhr.open(
- /* method */ "POST",
- /* target url */
- "/image-service/common/image_upload?systemId=dataPlatform&secret=9e0891a7a8c8e885&overwrite=true&key=" +
- file.uid + '.' + type
- /*, async, default to true */
- );
- //xhr.overrideMimeType("application/octet-stream");
- xhr.send(reader.result);
- xhr.onreadystatechange = function() {
- if (xhr.readyState == 4) {
- if (xhr.status == 200) {
- vm.$emit("getKey", file.uid + '.' + type, vm.keyName);
- }
- }
- };
- }
- };
- reader.readAsArrayBuffer(file);
- }
- }
- };
- </script>
- <style lang="less">
- .point-pic {
- .avatar-uploader {
- height: 180px;
- width: 180px;
- overflow: hidden;
- .el-upload {
- width: 100%;
- height: 100%;
- .el-upload-dragger{
- width: 100%;
- height: 100%;
- .el-icon-plus{
- display: block;
- width: 20px;
- height: 20px;
- font-size: 20px;
- margin: 80px;
- }
- }
- }
- }
- }
- .el-dialog__body{
- max-height: 600px;
- overflow-y: auto;
- }
- </style>
|